minora 0.1.0

package/src/components/tooltip.css

@@ -0,0 +1,401 @@
+/* ============================================================
+   ELEGANT MINIMALIST UI KIT — Tooltip & Popover Components
+   tooltip.css
+
+   ANATOMY — TOOLTIP
+   ─────────────────────────────────────────────────────────────
+   Structure (injected to body by JS):
+     <div class="tooltip tooltip-top" role="tooltip" style="position:fixed;">
+       <span class="tooltip-arrow"></span>
+       <span class="tooltip-content">Tooltip text</span>
+     </div>
+
+   Class layers:
+     1. .tooltip              → Base container, fixed position
+     2. .tooltip-{position}   → Arrow placement (top/bottom/left/right variants)
+     3. .tooltip-light         → Light bg variant
+     4. .tooltip-rich          → With bold title + body text
+     5. .tooltip-icon         → With leading icon
+     6. .tooltip-interactive  → With action button, stays on hover
+   ─────────────────────────────────────────────────────────────
+
+   ANATOMY — POPOVER
+   ─────────────────────────────────────────────────────────────
+   Structure:
+     <div class="popover" role="dialog" style="position:fixed;">
+       <div class="popover-header">Title + close</div>
+       <div class="popover-body">Freeform content</div>
+       <div class="popover-footer">Actions</div>
+     </div>
+   ─────────────────────────────────────────────────────────────
+   ============================================================ */
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Base
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-width: var(--tooltip-max-width);
+  font-family: var(--font-sans);
+  font-size: var(--tooltip-font-size);
+  line-height: var(--leading-tight);
+  padding: var(--tooltip-padding);
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-color);
+  border-radius: var(--tooltip-border-radius);
+  box-shadow: var(--tooltip-shadow);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: scale(0.95);
+  transition: opacity var(--tooltip-out-duration) var(--ease-in-out),
+              transform var(--tooltip-out-duration) var(--ease-in-out),
+              visibility var(--tooltip-out-duration) var(--ease-in-out);
+  word-wrap: break-word;
+}
+
+.tooltip.is-visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: scale(1);
+  transition: opacity var(--tooltip-in-duration) var(--ease-out),
+              transform var(--tooltip-in-duration) var(--ease-out),
+              visibility var(--tooltip-in-duration) var(--ease-out);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Arrow
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip-arrow {
+  position: absolute;
+  width: var(--tooltip-arrow-size);
+  height: var(--tooltip-arrow-size);
+  background-color: var(--tooltip-bg);
+  transform: rotate(45deg);
+}
+
+/* Arrow positions */
+.tooltip-top .tooltip-arrow,
+.tooltip-top-start .tooltip-arrow,
+.tooltip-top-end .tooltip-arrow {
+  bottom: calc(var(--tooltip-arrow-size) * -1 + 1px);
+}
+
+.tooltip-bottom .tooltip-arrow,
+.tooltip-bottom-start .tooltip-arrow,
+.tooltip-bottom-end .tooltip-arrow {
+  top: calc(var(--tooltip-arrow-size) * -1 + 1px);
+}
+
+.tooltip-left .tooltip-arrow,
+.tooltip-left-start .tooltip-arrow,
+.tooltip-left-end .tooltip-arrow {
+  right: calc(var(--tooltip-arrow-size) * -1 + 1px);
+}
+
+.tooltip-right .tooltip-arrow,
+.tooltip-right-start .tooltip-arrow,
+.tooltip-right-end .tooltip-arrow {
+  left: calc(var(--tooltip-arrow-size) * -1 + 1px);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Slide-in directions
+   Different translate based on position for smooth entrance
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip-top.is-visible,
+.tooltip-top-start.is-visible,
+.tooltip-top-end.is-visible {
+  transform: translateY(0) scale(1);
+}
+
+.tooltip-top:not(.is-visible),
+.tooltip-top-start:not(.is-visible),
+.tooltip-top-end:not(.is-visible) {
+  transform: translateY(4px) scale(0.95);
+}
+
+.tooltip-bottom.is-visible,
+.tooltip-bottom-start.is-visible,
+.tooltip-bottom-end.is-visible {
+  transform: translateY(0) scale(1);
+}
+
+.tooltip-bottom:not(.is-visible),
+.tooltip-bottom-start:not(.is-visible),
+.tooltip-bottom-end:not(.is-visible) {
+  transform: translateY(-4px) scale(0.95);
+}
+
+.tooltip-left.is-visible,
+.tooltip-left-start.is-visible,
+.tooltip-left-end.is-visible {
+  transform: translateX(0) scale(1);
+}
+
+.tooltip-left:not(.is-visible),
+.tooltip-left-start:not(.is-visible),
+.tooltip-left-end:not(.is-visible) {
+  transform: translateX(4px) scale(0.95);
+}
+
+.tooltip-right.is-visible,
+.tooltip-right-start.is-visible,
+.tooltip-right-end.is-visible {
+  transform: translateX(0) scale(1);
+}
+
+.tooltip-right:not(.is-visible),
+.tooltip-right-start:not(.is-visible),
+.tooltip-right-end:not(.is-visible) {
+  transform: translateX(-4px) scale(0.95);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Variant: Light
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip-light {
+  background-color: var(--tooltip-light-bg);
+  color: var(--tooltip-light-color);
+  border: var(--border-width) solid var(--tooltip-light-border);
+}
+
+.tooltip-light .tooltip-arrow {
+  background-color: var(--tooltip-light-bg);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Variant: Rich (title + body)
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip-rich {
+  padding: var(--space-3);
+  max-width: var(--tooltip-rich-max-width);
+}
+
+.tooltip-rich .tooltip-title {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-neutral-50);
+  margin-bottom: var(--space-0-5);
+  display: block;
+}
+
+.tooltip-rich .tooltip-body {
+  font-size: var(--text-xs);
+  color: var(--color-neutral-300);
+  line-height: var(--leading-snug);
+}
+
+.tooltip-light.tooltip-rich .tooltip-title {
+  color: var(--color-neutral-800);
+}
+
+.tooltip-light.tooltip-rich .tooltip-body {
+  color: var(--color-neutral-600);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Variant: With Icon
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip-with-icon {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+}
+
+.tooltip-icon-img {
+  flex-shrink: 0;
+  width: var(--space-4);
+  height: var(--space-4);
+  color: var(--color-neutral-400);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TOOLTIP — Variant: Interactive
+   Stays visible when mouse enters tooltip content
+   ═══════════════════════════════════════════════════════════ */
+
+.tooltip-interactive {
+  pointer-events: auto;
+}
+
+.tooltip-interactive .tooltip-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-top: var(--space-2-5);
+  padding-top: var(--space-2);
+  border-top: var(--border-width) solid rgba(255, 255, 255, 0.1);
+}
+
+.tooltip-light.tooltip-interactive .tooltip-actions {
+  border-top-color: var(--color-neutral-200);
+}
+
+.tooltip-action-btn {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: var(--font-medium);
+  padding: var(--space-0-5) var(--space-2);
+  border-radius: var(--radius-sm);
+  border: none;
+  cursor: pointer;
+  background-color: rgba(255, 255, 255, 0.15);
+  color: var(--color-neutral-50);
+  transition: background-color var(--duration-fast) var(--ease-in-out);
+}
+
+.tooltip-action-btn:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.tooltip-light .tooltip-action-btn {
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-700);
+}
+
+.tooltip-light .tooltip-action-btn:hover {
+  background-color: var(--color-neutral-200);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   TRIGGER ELEMENTS — Elements with tooltips
+   ═══════════════════════════════════════════════════════════ */
+
+[data-tooltip] {
+  position: relative;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   POPOVER — Container
+   ═══════════════════════════════════════════════════════════ */
+
+.popover {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  min-width: var(--popover-min-width);
+  max-width: var(--popover-max-width);
+  max-height: calc(100vh - var(--space-8));
+  background-color: var(--popover-bg);
+  color: var(--popover-color);
+  border: var(--border-width) solid var(--popover-border);
+  border-radius: var(--popover-border-radius);
+  box-shadow: var(--popover-shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96) translateY(-4px);
+  transition: opacity var(--tooltip-in-duration) var(--ease-out),
+              transform var(--tooltip-in-duration) var(--ease-out),
+              visibility var(--tooltip-in-duration) var(--ease-out);
+}
+
+.popover.is-visible {
+  opacity: 1;
+  visibility: visible;
+  transform: scale(1) translateY(0);
+}
+
+.popover.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+  transform: scale(0.96) translateY(-4px);
+  transition: opacity var(--tooltip-out-duration) var(--ease-in-out),
+              transform var(--tooltip-out-duration) var(--ease-in-out),
+              visibility var(--tooltip-out-duration) var(--ease-in-out);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   POPOVER — Header
+   ═══════════════════════════════════════════════════════════ */
+
+.popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-4);
+  padding: var(--space-4);
+  border-bottom: var(--border-width) solid var(--color-neutral-100);
+  flex-shrink: 0;
+}
+
+.popover-title {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-semibold);
+  color: var(--color-neutral-900);
+  margin: 0;
+}
+
+.popover-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-6);
+  height: var(--space-6);
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-neutral-400);
+  cursor: pointer;
+  padding: 0;
+  transition: color var(--duration-fast) var(--ease-in-out),
+              background-color var(--duration-fast) var(--ease-in-out);
+}
+
+.popover-close:hover {
+  color: var(--color-neutral-700);
+  background-color: var(--color-neutral-100);
+}
+
+.popover-close svg {
+  width: var(--space-3-5);
+  height: var(--space-3-5);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   POPOVER — Body
+   ═══════════════════════════════════════════════════════════ */
+
+.popover-body {
+  padding: var(--space-4);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.popover-body p {
+  font-size: var(--text-sm);
+  color: var(--color-neutral-600);
+  line-height: var(--leading-relaxed);
+  margin: 0 0 var(--space-3);
+}
+
+.popover-body p:last-child {
+  margin-bottom: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   POPOVER — Footer
+   ═══════════════════════════════════════════════════════════ */
+
+.popover-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-top: var(--border-width) solid var(--color-neutral-100);
+  flex-shrink: 0;
+}

package/src/js/modal.js

@@ -0,0 +1,127 @@
+/**
+ * Minora — Modal Manager
+ * ──────────────────────
+ * Full-featured modal system with focus trap, body scroll lock,
+ * nested stacking, and backdrop/escape close.
+ *
+ * Usage:
+ *   ModalManager.open('modal-id');
+ *   ModalManager.close('modal-id');
+ */
+(function() {
+  'use strict';
+
+  var ModalManager = (function() {
+    var openModals = [];
+    var previouslyFocused = [];
+    var scrollBarWidth = 0;
+
+    function getScrollBarWidth() {
+      var outer = document.createElement('div');
+      outer.style.cssText = 'position:absolute;top:-9999px;width:50px;height:50px;overflow:hidden;';
+      document.body.appendChild(outer);
+      var wNoScroll = outer.offsetWidth;
+      outer.style.overflow = 'scroll';
+      var inner = document.createElement('div');
+      inner.style.cssText = 'width:100%;height:50px;';
+      outer.appendChild(inner);
+      var wScroll = inner.offsetWidth;
+      document.body.removeChild(outer);
+      return wNoScroll - wScroll;
+    }
+
+    function lockBodyScroll() {
+      if (openModals.length === 0) {
+        scrollBarWidth = getScrollBarWidth();
+        document.body.style.paddingRight = scrollBarWidth + 'px';
+        document.body.classList.add('is-modal-open');
+      }
+    }
+
+    function unlockBodyScroll() {
+      if (openModals.length === 0) {
+        document.body.style.paddingRight = '';
+        document.body.classList.remove('is-modal-open');
+      }
+    }
+
+    function getFocusable(modal) {
+      var selectors = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+      return Array.from(modal.querySelectorAll(selectors)).filter(function(el) {
+        return el.offsetParent !== null;
+      });
+    }
+
+    function trapFocus(e, overlay) {
+      if (e.key !== 'Tab') return;
+      var focusable = getFocusable(overlay);
+      if (focusable.length === 0) return;
+
+      var first = focusable[0];
+      var last = focusable[focusable.length - 1];
+
+      if (e.shiftKey) {
+        if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+      } else {
+        if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    }
+
+    function open(id) {
+      var overlay = document.getElementById(id);
+      if (!overlay) return;
+
+      previouslyFocused.push(document.activeElement);
+      lockBodyScroll();
+      openModals.push(overlay);
+
+      overlay.classList.add('is-open');
+      overlay.setAttribute('aria-hidden', 'false');
+
+      overlay._focusHandler = function(e) { trapFocus(e, overlay); };
+      overlay.addEventListener('keydown', overlay._focusHandler);
+
+      overlay._backdropHandler = function(e) {
+        if (e.target === overlay) close(id);
+      };
+      overlay.addEventListener('click', overlay._backdropHandler);
+
+      overlay._escapeHandler = function(e) {
+        if (e.key === 'Escape' && openModals[openModals.length - 1] === overlay) close(id);
+      };
+      document.addEventListener('keydown', overlay._escapeHandler);
+
+      requestAnimationFrame(function() {
+        var focusable = getFocusable(overlay);
+        if (focusable.length > 0) focusable[0].focus();
+      });
+    }
+
+    function close(id) {
+      var overlay = document.getElementById(id);
+      if (!overlay) return;
+
+      overlay.classList.remove('is-open');
+      overlay.setAttribute('aria-hidden', 'true');
+
+      if (overlay._focusHandler) overlay.removeEventListener('keydown', overlay._focusHandler);
+      if (overlay._backdropHandler) overlay.removeEventListener('click', overlay._backdropHandler);
+      if (overlay._escapeHandler) document.removeEventListener('keydown', overlay._escapeHandler);
+
+      openModals = openModals.filter(function(m) { return m !== overlay; });
+      unlockBodyScroll();
+
+      var prev = previouslyFocused.pop();
+      if (prev && prev.focus) setTimeout(function() { prev.focus(); }, 50);
+    }
+
+    return { open: open, close: close };
+  })();
+
+  window.ModalManager = ModalManager;
+
+  // Initialize all overlays as hidden
+  document.querySelectorAll('.modal-overlay').forEach(function(el) {
+    el.setAttribute('aria-hidden', 'true');
+  });
+})();