@visitwonders/assembly 0.1.0

package/dist/overlay/modal.js

@@ -0,0 +1,269 @@
+import "./modal.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { hash } from '@ember/helper';
+import Blanket from './blanket.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Focusable elements selector
+// ============================================================================
+const FOCUSABLE_SELECTOR = ['a[href]', 'button:not([disabled])', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', '[tabindex]:not([tabindex="-1"])'].join(', ');
+function getFocusableElements(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+// ============================================================================
+// Sub-Components
+// ============================================================================
+class ModalHeader extends Component {
+  get ctx() {
+    return this.args.ctx;
+  }
+  get isCloseButtonVisible() {
+    return this.args.isCloseButtonVisible ?? true;
+  }
+  handleClose = event => {
+    event.preventDefault();
+    this.ctx.closeModal();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"modal-header\" data-test-modal-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"modal-title\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"modal-header-close\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-modal-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+const ModalBody = setComponentTemplate(precompileTemplate("<div class=\"modal-body\" data-test-modal-body ...attributes>\n  {{yield}}\n</div>", {
+  strictMode: true
+}), templateOnly());
+const ModalFooter = setComponentTemplate(precompileTemplate("<div class=\"modal-footer\" data-test-modal-footer ...attributes>\n  {{yield}}\n</div>", {
+  strictMode: true
+}), templateOnly());
+class ModalClose extends Component {
+  get ctx() {
+    return this.args.ctx;
+  }
+  handleClick = event => {
+    event.preventDefault();
+    this.ctx.closeModal();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<button type=\"button\" class=\"modal-close\" {{on \"click\" this.handleClick}} data-test-modal-close ...attributes>\n  {{yield}}\n</button>", {
+      strictMode: true,
+      scope: () => ({
+        on
+      })
+    }), this);
+  }
+}
+// ============================================================================
+// Main Component
+// ============================================================================
+let modalIdCounter = 0;
+class Modal extends Component {
+  static {
+    g(this.prototype, "_isOpenInternal", [tracked], function () {
+      return undefined;
+    });
+  }
+  #_isOpenInternal = (i(this, "_isOpenInternal"), void 0);
+  static {
+    g(this.prototype, "exitAnimationActive", [tracked], function () {
+      return false;
+    });
+  }
+  #exitAnimationActive = (i(this, "exitAnimationActive"), void 0);
+  previousVisible = undefined;
+  contentElement = null;
+  previousActiveElement = null;
+  titleId = `modal-title-${++modalIdCounter}`;
+  // ============================================================================
+  // Getters
+  // ============================================================================
+  get isOpenInternal() {
+    if (this._isOpenInternal === undefined) {
+      return this.args.defaultOpen ?? false;
+    }
+    return this._isOpenInternal;
+  }
+  set isOpenInternal(value) {
+    this._isOpenInternal = value;
+  }
+  get isControlled() {
+    return this.args.open !== undefined;
+  }
+  get isOpen() {
+    return this.isControlled ? this.args.open : this.isOpenInternal;
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get role() {
+    return this.args.role ?? 'dialog';
+  }
+  get closeOnBackdropClick() {
+    if (this.args.preventClose) return false;
+    return this.args.closeOnBackdropClick ?? true;
+  }
+  get closeOnEscape() {
+    if (this.args.preventClose) return false;
+    return this.args.closeOnEscape ?? true;
+  }
+  get destinationElement() {
+    return this.args.container ?? document.body;
+  }
+  get shouldRender() {
+    return this.isOpen || this.exitAnimationActive;
+  }
+  get dataState() {
+    return this.isOpen ? 'open' : 'closed';
+  }
+  // ============================================================================
+  // Actions
+  // ============================================================================
+  setOpen = value => {
+    if (!this.isControlled) {
+      this.isOpenInternal = value;
+    }
+    this.args.onOpenChange?.(value);
+  };
+  openModal = () => {
+    this.setOpen(true);
+  };
+  closeModal = () => {
+    this.setOpen(false);
+  };
+  handleBackdropClose = () => {
+    if (this.closeOnBackdropClick) {
+      this.closeModal();
+    }
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  trackVisibility = modifier((_element, _positional, named) => {
+    const wasVisible = this.previousVisible;
+    this.previousVisible = named.visible;
+    if (wasVisible === true && named.visible === false) {
+      this.exitAnimationActive = true;
+    } else if (named.visible) {
+      this.exitAnimationActive = false;
+    }
+  });
+  setupModal = modifier(element => {
+    this.contentElement = element;
+    // Store the element that had focus before modal opened (for return focus)
+    this.previousActiveElement = document.activeElement;
+    // Lock scroll - Modal controls this to ensure it stays locked during exit animation
+    const originalOverflow = document.body.style.overflow;
+    const originalPaddingRight = document.body.style.paddingRight;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    // Focus the first focusable element or the modal itself
+    const focusables = getFocusableElements(element);
+    if (focusables.length > 0) {
+      focusables[0]?.focus();
+    } else {
+      element.focus();
+    }
+    // Event handlers
+    const handleKeyDown = event => {
+      if (event.key === 'Escape' && this.closeOnEscape) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.closeModal();
+        return;
+      }
+      // Focus trap
+      if (event.key === 'Tab') {
+        const focusables = getFocusableElements(element);
+        if (focusables.length === 0) {
+          event.preventDefault();
+          return;
+        }
+        const firstFocusable = focusables[0];
+        const lastFocusable = focusables[focusables.length - 1];
+        const activeElement = document.activeElement;
+        // If focus is outside the modal, move it inside
+        if (!element.contains(activeElement)) {
+          event.preventDefault();
+          firstFocusable?.focus();
+          return;
+        }
+        if (event.shiftKey) {
+          // Shift+Tab: if on first element, wrap to last
+          if (activeElement === firstFocusable) {
+            event.preventDefault();
+            lastFocusable?.focus();
+          }
+        } else {
+          // Tab: if on last element, wrap to first
+          if (activeElement === lastFocusable) {
+            event.preventDefault();
+            firstFocusable?.focus();
+          }
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      this.contentElement = null;
+      document.removeEventListener('keydown', handleKeyDown);
+      // Restore scroll - only released when Modal unmounts (after exit animation)
+      document.body.style.overflow = originalOverflow;
+      document.body.style.paddingRight = originalPaddingRight;
+      // Return focus to the element that had focus before modal opened
+      if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+        this.previousActiveElement.focus();
+        this.previousActiveElement = null;
+      }
+    };
+  });
+  handleAnimationEnd = () => {
+    if (!this.isOpen) {
+      this.exitAnimationActive = false;
+    }
+  };
+  // ============================================================================
+  // Context
+  // ============================================================================
+  get context() {
+    return {
+      isOpen: this.isOpen,
+      titleId: this.titleId,
+      closeModal: this.closeModal
+    };
+  }
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("{{!-- Visibility tracker for exit animations --}}\n<span hidden {{this.trackVisibility visible=this.isOpen}} data-test-modal-tracker></span>\n\n{{!-- Blanket is outside shouldRender so it can manage its own exit animation --}}\n<Blanket @visible={{this.isOpen}} @onClose={{this.handleBackdropClose}} @closeOnClick={{this.closeOnBackdropClick}} @lockScroll={{false}} @container={{this.destinationElement}} data-test-modal-blanket />\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"modal-container\" role={{this.role}} aria-modal=\"true\" aria-labelledby={{this.titleId}} tabindex=\"-1\" data-size={{this.size}} data-state={{this.dataState}} {{this.setupModal}} {{on \"animationend\" this.handleAnimationEnd}} data-test-modal-container ...attributes>\n      <div class=\"modal-content\" data-test-modal-content>\n        {{yield (hash Header=(component ModalHeader ctx=this.context) Body=(component ModalBody ctx=this.context) Footer=(component ModalFooter ctx=this.context) Close=(component ModalClose ctx=this.context) isOpen=this.isOpen close=this.closeModal)}}\n      </div>\n    </div>\n  {{/in-element}}\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        Blanket,
+        on,
+        hash,
+        ModalHeader,
+        ModalBody,
+        ModalFooter,
+        ModalClose
+      })
+    }), this);
+  }
+}
+
+export { ModalBody, ModalClose, ModalFooter, ModalHeader, Modal as default };
+//# sourceMappingURL=modal.js.map

package/dist/overlay/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/overlay/popover.css

@@ -0,0 +1,210 @@
+/* ===================================
+ * Popover Component
+ * =================================== */
+
+.popover {
+  display: contents;
+}
+
+/* ===================================
+ * Trigger
+ * =================================== */
+
+.popover-trigger {
+  /* Reset button styles */
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popover-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+
+/* ===================================
+ * Content
+ * =================================== */
+
+.popover-content {
+  /* Positioning */
+  position: absolute;
+  z-index: var(--z-popover);
+
+  /* Visual */
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+
+  /* Sizing */
+  min-width: 160px;
+  max-width: 320px;
+  padding: var(--spacing-3);
+
+  /* Animation setup */
+  transform-origin: var(--transform-origin, center);
+}
+
+/* Transform origin based on side */
+.popover-content[data-side="top"] {
+  --transform-origin: bottom center;
+}
+
+.popover-content[data-side="bottom"] {
+  --transform-origin: top center;
+}
+
+.popover-content[data-side="left"] {
+  --transform-origin: right center;
+}
+
+.popover-content[data-side="right"] {
+  --transform-origin: left center;
+}
+
+/* ===================================
+ * Animations
+ * =================================== */
+
+/* Fade animation */
+.popover-content[data-animation="fade"] {
+  animation: popover-fade-in var(--duration-150) var(--easing-out);
+}
+
+.popover-content[data-animation="fade"][data-state="closed"] {
+  animation: popover-fade-out var(--duration-150) var(--easing-in);
+}
+
+@keyframes popover-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes popover-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Scale animation (default) */
+.popover-content[data-animation="scale"] {
+  animation: popover-scale-in var(--duration-150) var(--easing-out);
+}
+
+.popover-content[data-animation="scale"][data-state="closed"] {
+  animation: popover-scale-out var(--duration-150) var(--easing-in);
+}
+
+@keyframes popover-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes popover-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* No animation */
+.popover-content[data-animation="none"] {
+  animation: none;
+}
+
+/* ===================================
+ * Arrow
+ * =================================== */
+
+.popover-arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--color-bg-surface);
+  border: 1px solid var(--color-border-subtle);
+  transform: rotate(45deg);
+  z-index: -1;
+}
+
+/* Arrow positioning adjustments based on side */
+.popover-arrow[data-side="top"] {
+  border-top: none;
+  border-left: none;
+}
+
+.popover-arrow[data-side="bottom"] {
+  border-bottom: none;
+  border-right: none;
+}
+
+.popover-arrow[data-side="left"] {
+  border-bottom: none;
+  border-left: none;
+}
+
+.popover-arrow[data-side="right"] {
+  border-top: none;
+  border-right: none;
+}
+
+/* ===================================
+ * Close Button
+ * =================================== */
+
+.popover-close {
+  /* Reset button styles */
+  appearance: none;
+  background: none;
+  border: none;
+  padding: var(--spacing-1);
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: var(--color-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+
+  transition:
+    color var(--duration-150) var(--easing-out),
+    background-color var(--duration-150) var(--easing-out);
+}
+
+.popover-close:hover {
+  color: var(--color-text);
+  background: var(--color-bg-neutral-subtle);
+}
+
+.popover-close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}