@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/modal-BxL4EDMm.js

@@ -0,0 +1,299 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, query as o, state as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+//#region source/components/modal/modal.style.ts
+var l = n`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  :host([open]) {
+    display: block;
+  }
+
+  :host(:not([open])) {
+    display: none;
+  }
+
+  /* Backdrop */
+  .modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--bp-z-modal);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--bp-color-backdrop);
+    animation: fadeIn var(--bp-duration-fast) var(--bp-ease-out);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideUp {
+    from {
+      transform: translateY(var(--bp-spacing-8));
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  /* Dialog */
+  .modal-dialog {
+    position: relative;
+    background-color: var(--bp-color-surface-elevated);
+    border-radius: var(--bp-border-radius-lg);
+    box-shadow: var(--bp-shadow-xl);
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    animation: slideUp var(--bp-duration-normal) var(--bp-ease-out);
+    outline: none;
+  }
+
+  /* Header */
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--bp-spacing-md);
+    padding: var(--bp-spacing-6);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    font-family: var(--bp-font-family);
+  }
+
+  ::slotted([slot='header']) {
+    flex: 1;
+    font-size: var(--bp-font-size-xl);
+    font-weight: var(--bp-font-weight-semibold);
+    color: var(--bp-color-text-strong);
+    line-height: var(--bp-line-height-tight);
+    margin: 0;
+  }
+
+  /* Close button */
+  .modal-close {
+    appearance: none;
+    background: transparent;
+    border: none;
+    padding: var(--bp-spacing-2);
+    cursor: pointer;
+    color: var(--bp-color-text-muted);
+    border-radius: var(--bp-border-radius-md);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all var(--bp-transition-fast);
+    flex-shrink: 0;
+  }
+
+  .modal-close:hover {
+    background-color: var(--bp-color-surface);
+    color: var(--bp-color-text);
+  }
+
+  .modal-close:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .modal-close svg {
+    display: block;
+  }
+
+  /* Body */
+  .modal-body {
+    flex: 1;
+    padding: var(--bp-spacing-6);
+    overflow-y: auto;
+    font-family: var(--bp-font-family);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-relaxed);
+    color: var(--bp-color-text);
+  }
+
+  /* Footer */
+  .modal-footer {
+    padding: var(--bp-spacing-6);
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    display: flex;
+    gap: var(--bp-spacing-3);
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .modal-footer:empty {
+    display: none;
+  }
+
+  /* Sizes */
+  .modal-dialog--sm {
+    width: 90%;
+    max-width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));
+  }
+
+  .modal-dialog--md {
+    width: 90%;
+    max-width: var(--bp-breakpoint-sm);
+  }
+
+  .modal-dialog--lg {
+    width: 90%;
+    max-width: var(--bp-breakpoint-md);
+  }
+
+  /* States */
+  .modal-dialog:focus {
+    outline: none;
+  }
+`, u = class extends t {
+	static {
+		this.styles = [l];
+	}
+	constructor() {
+		super(), this.previouslyFocusedElement = null, this.bodyScrollPrevented = !1, this.handleKeyDown = (e) => {
+			e.key === "Escape" && this.open && (e.preventDefault(), this.close()), e.key === "Tab" && this.open && this.trapFocus(e);
+		}, this.handleBackdropClick = (e) => {
+			e.target === e.currentTarget && this.close();
+		}, this.handleCloseButtonClick = () => {
+			this.close();
+		}, this.open = !1, this.size = "md", this.ariaLabelledby = "";
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this.handleKeyDown), this.restoreFocus(), this.restoreBodyScroll();
+	}
+	updated(e) {
+		e.has("open") && (this.open ? this.handleOpen() : this.handleClose());
+	}
+	handleOpen() {
+		this.previouslyFocusedElement = document.activeElement, this.preventBodyScroll(), this.updateComplete.then(() => {
+			this.setFocusToDialog();
+		});
+	}
+	handleClose() {
+		this.restoreFocus(), this.restoreBodyScroll();
+	}
+	preventBodyScroll() {
+		this.bodyScrollPrevented ||= (document.body.style.overflow = "hidden", !0);
+	}
+	restoreBodyScroll() {
+		this.bodyScrollPrevented &&= (document.body.style.overflow = "", !1);
+	}
+	setFocusToDialog() {
+		this.dialogElement && this.dialogElement.focus();
+	}
+	restoreFocus() {
+		this.previouslyFocusedElement &&= (this.previouslyFocusedElement.focus(), null);
+	}
+	trapFocus(e) {
+		let t = this.getFocusableElements();
+		if (t.length === 0) return;
+		let n = t[0], r = t[t.length - 1];
+		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
+	}
+	getFocusableElements() {
+		if (!this.shadowRoot) return [];
+		let e = this.shadowRoot.querySelectorAll([
+			"button:not([disabled])",
+			"a[href]",
+			"input:not([disabled])",
+			"select:not([disabled])",
+			"textarea:not([disabled])",
+			"[tabindex]:not([tabindex=\"-1\"])"
+		].join(","));
+		return Array.from(e);
+	}
+	close() {
+		this.open = !1, this.dispatchEvent(new CustomEvent("bp-close", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		if (!this.open) return r``;
+		let e = {
+			"modal-dialog": !0,
+			[`modal-dialog--${this.size}`]: !0
+		};
+		return r`
+      <div
+        class="modal-backdrop"
+        part="backdrop"
+        @click=${this.handleBackdropClick}
+      >
+        <div
+          class=${c(e)}
+          part="dialog"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.ariaLabelledby || "modal-header"}
+          tabindex="-1"
+        >
+          <div class="modal-header" part="header">
+            <slot name="header"></slot>
+            <button
+              class="modal-close"
+              part="close-button"
+              type="button"
+              aria-label="Close"
+              @click=${this.handleCloseButtonClick}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="20"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <line x1="18" y1="6" x2="6" y2="18"></line>
+                <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body" part="body">
+            <slot></slot>
+          </div>
+          <div class="modal-footer" part="footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "open", void 0), e([a({
+	type: String,
+	reflect: !0
+})], u.prototype, "size", void 0), e([a({
+	type: String,
+	attribute: "aria-labelledby"
+})], u.prototype, "ariaLabelledby", void 0), e([o(".modal-dialog")], u.prototype, "dialogElement", void 0), e([s()], u.prototype, "previouslyFocusedElement", void 0), e([s()], u.prototype, "bodyScrollPrevented", void 0), u = e([i("bp-modal")], u);
+//#endregion
+export { u as t };
+
+//# sourceMappingURL=modal-BxL4EDMm.js.map

package/dist/shared/modal-BxL4EDMm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-BxL4EDMm.js","names":["_decorate","__decorate","modalStyles","BpModal","LitElement","event","changedProperties","focusableElements","firstElement","lastElement","elements","dialogClasses","classMap","property","query","state","customElement"],"sources":["../../source/components/modal/modal.style.ts","../../source/components/modal/modal.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const modalStyles = css`\n  /* Base styles */\n  :host {\n    display: block;\n  }\n\n  :host([open]) {\n    display: block;\n  }\n\n  :host(:not([open])) {\n    display: none;\n  }\n\n  /* Backdrop */\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: var(--bp-z-modal);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--bp-color-backdrop);\n    animation: fadeIn var(--bp-duration-fast) var(--bp-ease-out);\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes slideUp {\n    from {\n      transform: translateY(var(--bp-spacing-8));\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  /* Dialog */\n  .modal-dialog {\n    position: relative;\n    background-color: var(--bp-color-surface-elevated);\n    border-radius: var(--bp-border-radius-lg);\n    box-shadow: var(--bp-shadow-xl);\n    max-height: 90vh;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    animation: slideUp var(--bp-duration-normal) var(--bp-ease-out);\n    outline: none;\n  }\n\n  /* Header */\n  .modal-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--bp-spacing-md);\n    padding: var(--bp-spacing-6);\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\n    font-family: var(--bp-font-family);\n  }\n\n  ::slotted([slot='header']) {\n    flex: 1;\n    font-size: var(--bp-font-size-xl);\n    font-weight: var(--bp-font-weight-semibold);\n    color: var(--bp-color-text-strong);\n    line-height: var(--bp-line-height-tight);\n    margin: 0;\n  }\n\n  /* Close button */\n  .modal-close {\n    appearance: none;\n    background: transparent;\n    border: none;\n    padding: var(--bp-spacing-2);\n    cursor: pointer;\n    color: var(--bp-color-text-muted);\n    border-radius: var(--bp-border-radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all var(--bp-transition-fast);\n    flex-shrink: 0;\n  }\n\n  .modal-close:hover {\n    background-color: var(--bp-color-surface);\n    color: var(--bp-color-text);\n  }\n\n  .modal-close:focus-visible {\n    outline: var(--bp-focus-ring);\n    outline-offset: var(--bp-focus-offset);\n  }\n\n  .modal-close svg {\n    display: block;\n  }\n\n  /* Body */\n  .modal-body {\n    flex: 1;\n    padding: var(--bp-spacing-6);\n    overflow-y: auto;\n    font-family: var(--bp-font-family);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-relaxed);\n    color: var(--bp-color-text);\n  }\n\n  /* Footer */\n  .modal-footer {\n    padding: var(--bp-spacing-6);\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\n    display: flex;\n    gap: var(--bp-spacing-3);\n    justify-content: flex-end;\n    align-items: center;\n  }\n\n  .modal-footer:empty {\n    display: none;\n  }\n\n  /* Sizes */\n  .modal-dialog--sm {\n    width: 90%;\n    max-width: calc(var(--bp-spacing-24) * 4 + var(--bp-spacing-16));\n  }\n\n  .modal-dialog--md {\n    width: 90%;\n    max-width: var(--bp-breakpoint-sm);\n  }\n\n  .modal-dialog--lg {\n    width: 90%;\n    max-width: var(--bp-breakpoint-md);\n  }\n\n  /* States */\n  .modal-dialog:focus {\n    outline: none;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { modalStyles } from './modal.style.js';\n\nexport type ModalSize = 'sm' | 'md' | 'lg';\n\n@customElement('bp-modal')\nexport class BpModal extends LitElement {\n  /** Whether the modal is currently open */\n  @property({ type: Boolean, reflect: true }) declare open: boolean;\n\n  /** Size variant of the modal */\n  @property({ type: String, reflect: true }) declare size: ModalSize;\n\n  /** ID for aria-labelledby attribute - should match header content */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  declare ariaLabelledby: string;\n\n  /** Dialog element reference for focus management */\n  @query('.modal-dialog') private dialogElement!: HTMLElement;\n\n  /** Store the element that had focus before modal opened */\n  @state() private previouslyFocusedElement: HTMLElement | null = null;\n\n  /** Track if body scroll is prevented */\n  @state() private bodyScrollPrevented = false;\n\n  static styles = [modalStyles];\n\n  constructor() {\n    super();\n    this.open = false;\n    this.size = 'md';\n    this.ariaLabelledby = '';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.handleKeyDown);\n    this.restoreFocus();\n    this.restoreBodyScroll();\n  }\n\n  updated(changedProperties: Map<string, unknown>) {\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen() {\n    // Store previously focused element\n    this.previouslyFocusedElement = document.activeElement as HTMLElement;\n\n    // Prevent body scroll\n    this.preventBodyScroll();\n\n    // Set focus to dialog after it's rendered\n    this.updateComplete.then(() => {\n      this.setFocusToDialog();\n    });\n  }\n\n  private handleClose() {\n    this.restoreFocus();\n    this.restoreBodyScroll();\n  }\n\n  private preventBodyScroll() {\n    if (!this.bodyScrollPrevented) {\n      document.body.style.overflow = 'hidden';\n      this.bodyScrollPrevented = true;\n    }\n  }\n\n  private restoreBodyScroll() {\n    if (this.bodyScrollPrevented) {\n      document.body.style.overflow = '';\n      this.bodyScrollPrevented = false;\n    }\n  }\n\n  private setFocusToDialog() {\n    if (this.dialogElement) {\n      this.dialogElement.focus();\n    }\n  }\n\n  private restoreFocus() {\n    if (this.previouslyFocusedElement) {\n      this.previouslyFocusedElement.focus();\n      this.previouslyFocusedElement = null;\n    }\n  }\n\n  private handleKeyDown = (event: globalThis.KeyboardEvent) => {\n    if (event.key === 'Escape' && this.open) {\n      event.preventDefault();\n      this.close();\n    }\n\n    // Trap focus within modal\n    if (event.key === 'Tab' && this.open) {\n      this.trapFocus(event);\n    }\n  };\n\n  private trapFocus(event: globalThis.KeyboardEvent) {\n    const focusableElements = this.getFocusableElements();\n    if (focusableElements.length === 0) return;\n\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    if (event.shiftKey) {\n      // Shift + Tab\n      if (document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n    } else {\n      // Tab\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    }\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    if (!this.shadowRoot) return [];\n\n    const focusableSelectors = [\n      'button:not([disabled])',\n      'a[href]',\n      'input:not([disabled])',\n      'select:not([disabled])',\n      'textarea:not([disabled])',\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ];\n\n    const elements = this.shadowRoot.querySelectorAll(\n      focusableSelectors.join(',')\n    );\n    return Array.from(elements) as HTMLElement[];\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    // Only close if clicking directly on backdrop (not bubbled from dialog)\n    if (event.target === event.currentTarget) {\n      this.close();\n    }\n  };\n\n  private handleCloseButtonClick = () => {\n    this.close();\n  };\n\n  private close() {\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-close', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    if (!this.open) {\n      return html``;\n    }\n\n    const dialogClasses = {\n      'modal-dialog': true,\n      [`modal-dialog--${this.size}`]: true,\n    };\n\n    return html`\n      <div\n        class=\"modal-backdrop\"\n        part=\"backdrop\"\n        @click=${this.handleBackdropClick}\n      >\n        <div\n          class=${classMap(dialogClasses)}\n          part=\"dialog\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.ariaLabelledby || 'modal-header'}\n          tabindex=\"-1\"\n        >\n          <div class=\"modal-header\" part=\"header\">\n            <slot name=\"header\"></slot>\n            <button\n              class=\"modal-close\"\n              part=\"close-button\"\n              type=\"button\"\n              aria-label=\"Close\"\n              @click=${this.handleCloseButtonClick}\n            >\n              <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"20\"\n                height=\"20\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n              </svg>\n            </button>\n          </div>\n          <div class=\"modal-body\" part=\"body\">\n            <slot></slot>\n          </div>\n          <div class=\"modal-footer\" part=\"footer\">\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-modal': BpModal;\n  }\n}\n"],"mappings":"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"}