unigrid.css 0.3.0 → 0.3.2

package/src/js/index.js

@@ -1,19 +1,20 @@
-/**
- * Unigrid.js — All interactive components bundled.
- *
- * Includes: dropdown, tabs, scrollspy
- *
- * Usage:
- *   <script src="dist/unigrid.js"></script>
- *   or
- *   <script src="dist/unigrid.min.js"></script>
- *
- * Individual files also available:
- *   <script src="dist/dropdown.js"></script>
- *   <script src="dist/tabs.js"></script>
- *   <script src="dist/scrollspy.js"></script>
- */
-
-import './dropdown.js';
-import './tabs.js';
-import './scrollspy.js';
+/**
+ * Unigrid.js — All interactive components bundled.
+ *
+ * Includes: dropdown, tabs, scrollspy
+ *
+ * Usage:
+ *   <script src="dist/unigrid.js"></script>
+ *   or
+ *   <script src="dist/unigrid.min.js"></script>
+ *
+ * Individual files also available:
+ *   <script src="dist/dropdown.js"></script>
+ *   <script src="dist/tabs.js"></script>
+ *   <script src="dist/scrollspy.js"></script>
+ */
+
+import './dropdown.js';
+import './tabs.js';
+import './scrollspy.js';
+import './modal.js';

package/src/js/modal.js

@@ -0,0 +1,81 @@
+/**
+ * Unigrid Modal
+ *
+ * Opens/closes modals via data attributes.
+ * Closes on backdrop click, close button, or Escape key.
+ * Locks body scroll when open.
+ *
+ * Usage:
+ *   <button data-ug-modal-open="my-modal">Open</button>
+ *
+ *   <div class="ug-modal" id="my-modal">
+ *     <div class="ug-modal__backdrop" data-ug-modal-close></div>
+ *     <div class="ug-modal__dialog">
+ *       <div class="ug-modal__header">
+ *         <h3 class="ug-modal__title">Title</h3>
+ *         <button class="ug-modal__close" data-ug-modal-close>&times;</button>
+ *       </div>
+ *       <div class="ug-modal__body">Content</div>
+ *       <div class="ug-modal__footer">
+ *         <button class="ug-btn" data-ug-modal-close>Close</button>
+ *       </div>
+ *     </div>
+ *   </div>
+ */
+(function () {
+  function openModal(id) {
+    var modal = document.getElementById(id);
+    if (!modal) return;
+    modal.classList.add('ug-modal--open');
+    document.body.classList.add('ug-modal-open');
+  }
+
+  function closeModal(modal) {
+    if (!modal) return;
+    modal.classList.remove('ug-modal--open');
+    // Only unlock body if no other modals are open
+    if (!document.querySelector('.ug-modal--open')) {
+      document.body.classList.remove('ug-modal-open');
+    }
+  }
+
+  function closeAllModals() {
+    document.querySelectorAll('.ug-modal--open').forEach(function (m) {
+      m.classList.remove('ug-modal--open');
+    });
+    document.body.classList.remove('ug-modal-open');
+  }
+
+  function init() {
+    // Open triggers
+    document.addEventListener('click', function (e) {
+      var openTrigger = e.target.closest('[data-ug-modal-open]');
+      if (openTrigger) {
+        e.preventDefault();
+        openModal(openTrigger.getAttribute('data-ug-modal-open'));
+        return;
+      }
+
+      // Close triggers
+      var closeTrigger = e.target.closest('[data-ug-modal-close]');
+      if (closeTrigger) {
+        e.preventDefault();
+        var modal = closeTrigger.closest('.ug-modal');
+        closeModal(modal);
+      }
+    });
+
+    // Close on Escape
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') {
+        closeAllModals();
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/src/js/scrollspy.js

@@ -1,87 +1,87 @@
-/**
- * Unigrid Scrollspy
- *
- * Highlights navigation links based on which section is currently
- * visible in the viewport using IntersectionObserver.
- *
- * Usage:
- *   <nav data-ug-scrollspy>
- *     <a class="ug-scrollspy__link" href="#intro">Intro</a>
- *     <a class="ug-scrollspy__link" href="#features">Features</a>
- *   </nav>
- *
- *   <section id="intro">...</section>
- *   <section id="features">...</section>
- *
- * Options (via data attributes on [data-ug-scrollspy]):
- *   data-ug-scrollspy-offset="100"   — top offset in px (default: 100)
- *   data-ug-scrollspy-class="custom" — active class (default: ug-scrollspy__link--active)
- */
-(function () {
-  function init() {
-    document.querySelectorAll('[data-ug-scrollspy]').forEach(function (nav) {
-      var links = nav.querySelectorAll('.ug-scrollspy__link, [data-ug-spy]');
-      if (!links.length) return;
-
-      var offset = parseInt(nav.getAttribute('data-ug-scrollspy-offset') || '100', 10);
-      var activeClass = nav.getAttribute('data-ug-scrollspy-class') || 'ug-scrollspy__link--active';
-
-      // Collect target sections
-      var targets = [];
-      links.forEach(function (link) {
-        var href = link.getAttribute('href');
-        if (!href || href.charAt(0) !== '#') return;
-        var target = document.querySelector(href);
-        if (target) {
-          targets.push({ link: link, target: target });
-        }
-      });
-
-      if (!targets.length) return;
-
-      // Track which sections are visible
-      var visibleSections = new Set();
-
-      var observer = new IntersectionObserver(function (entries) {
-        entries.forEach(function (entry) {
-          if (entry.isIntersecting) {
-            visibleSections.add(entry.target.id);
-          } else {
-            visibleSections.delete(entry.target.id);
-          }
-        });
-
-        // Find the first visible section (in DOM order)
-        var activeId = null;
-        for (var i = 0; i < targets.length; i++) {
-          if (visibleSections.has(targets[i].target.id)) {
-            activeId = targets[i].target.id;
-            break;
-          }
-        }
-
-        // Update active states
-        targets.forEach(function (item) {
-          if (item.target.id === activeId) {
-            item.link.classList.add(activeClass);
-          } else {
-            item.link.classList.remove(activeClass);
-          }
-        });
-      }, {
-        rootMargin: '-' + offset + 'px 0px -50% 0px',
-        threshold: 0
-      });
-
-      targets.forEach(function (item) {
-        observer.observe(item.target);
-      });
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();
+/**
+ * Unigrid Scrollspy
+ *
+ * Highlights navigation links based on which section is currently
+ * visible in the viewport using IntersectionObserver.
+ *
+ * Usage:
+ *   <nav data-ug-scrollspy>
+ *     <a class="ug-scrollspy__link" href="#intro">Intro</a>
+ *     <a class="ug-scrollspy__link" href="#features">Features</a>
+ *   </nav>
+ *
+ *   <section id="intro">...</section>
+ *   <section id="features">...</section>
+ *
+ * Options (via data attributes on [data-ug-scrollspy]):
+ *   data-ug-scrollspy-offset="100"   — top offset in px (default: 100)
+ *   data-ug-scrollspy-class="custom" — active class (default: ug-scrollspy__link--active)
+ */
+(function () {
+  function init() {
+    document.querySelectorAll('[data-ug-scrollspy]').forEach(function (nav) {
+      var links = nav.querySelectorAll('.ug-scrollspy__link, [data-ug-spy]');
+      if (!links.length) return;
+
+      var offset = parseInt(nav.getAttribute('data-ug-scrollspy-offset') || '100', 10);
+      var activeClass = nav.getAttribute('data-ug-scrollspy-class') || 'ug-scrollspy__link--active';
+
+      // Collect target sections
+      var targets = [];
+      links.forEach(function (link) {
+        var href = link.getAttribute('href');
+        if (!href || href.charAt(0) !== '#') return;
+        var target = document.querySelector(href);
+        if (target) {
+          targets.push({ link: link, target: target });
+        }
+      });
+
+      if (!targets.length) return;
+
+      // Track which sections are visible
+      var visibleSections = new Set();
+
+      var observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            visibleSections.add(entry.target.id);
+          } else {
+            visibleSections.delete(entry.target.id);
+          }
+        });
+
+        // Find the first visible section (in DOM order)
+        var activeId = null;
+        for (var i = 0; i < targets.length; i++) {
+          if (visibleSections.has(targets[i].target.id)) {
+            activeId = targets[i].target.id;
+            break;
+          }
+        }
+
+        // Update active states
+        targets.forEach(function (item) {
+          if (item.target.id === activeId) {
+            item.link.classList.add(activeClass);
+          } else {
+            item.link.classList.remove(activeClass);
+          }
+        });
+      }, {
+        rootMargin: '-' + offset + 'px 0px -50% 0px',
+        threshold: 0
+      });
+
+      targets.forEach(function (item) {
+        observer.observe(item.target);
+      });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/src/js/tabs.js

@@ -1,58 +1,58 @@
-/**
- * Unigrid Tabs
- *
- * Switches active tab link and panel on click.
- * Auto-initializes on DOMContentLoaded.
- *
- * Usage:
- *   <div class="ug-tabs" data-ug-tabs>
- *     <ul class="ug-tabs__nav">
- *       <li class="ug-tabs__item">
- *         <button class="ug-tabs__link ug-tabs__link--active" data-ug-tab="tab1">Tab 1</button>
- *       </li>
- *     </ul>
- *     <div class="ug-tabs__content">
- *       <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="tab1">...</div>
- *     </div>
- *   </div>
- */
-(function () {
-  function init() {
-    document.addEventListener('click', function (e) {
-      var link = e.target.closest('[data-ug-tab]');
-      if (!link) return;
-
-      e.preventDefault();
-
-      var tabs = link.closest('.ug-tabs');
-      if (!tabs) return;
-
-      var target = link.getAttribute('data-ug-tab');
-
-      // Deactivate all links
-      tabs.querySelectorAll('.ug-tabs__link').forEach(function (l) {
-        l.classList.remove('ug-tabs__link--active');
-      });
-
-      // Deactivate all panels
-      tabs.querySelectorAll('.ug-tabs__panel').forEach(function (p) {
-        p.classList.remove('ug-tabs__panel--active');
-      });
-
-      // Activate clicked link
-      link.classList.add('ug-tabs__link--active');
-
-      // Activate matching panel
-      var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
-      if (panel) {
-        panel.classList.add('ug-tabs__panel--active');
-      }
-    });
-  }
-
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init);
-  } else {
-    init();
-  }
-})();
+/**
+ * Unigrid Tabs
+ *
+ * Switches active tab link and panel on click.
+ * Auto-initializes on DOMContentLoaded.
+ *
+ * Usage:
+ *   <div class="ug-tabs" data-ug-tabs>
+ *     <ul class="ug-tabs__nav">
+ *       <li class="ug-tabs__item">
+ *         <button class="ug-tabs__link ug-tabs__link--active" data-ug-tab="tab1">Tab 1</button>
+ *       </li>
+ *     </ul>
+ *     <div class="ug-tabs__content">
+ *       <div class="ug-tabs__panel ug-tabs__panel--active" data-ug-panel="tab1">...</div>
+ *     </div>
+ *   </div>
+ */
+(function () {
+  function init() {
+    document.addEventListener('click', function (e) {
+      var link = e.target.closest('[data-ug-tab]');
+      if (!link) return;
+
+      e.preventDefault();
+
+      var tabs = link.closest('.ug-tabs');
+      if (!tabs) return;
+
+      var target = link.getAttribute('data-ug-tab');
+
+      // Deactivate all links
+      tabs.querySelectorAll('.ug-tabs__link').forEach(function (l) {
+        l.classList.remove('ug-tabs__link--active');
+      });
+
+      // Deactivate all panels
+      tabs.querySelectorAll('.ug-tabs__panel').forEach(function (p) {
+        p.classList.remove('ug-tabs__panel--active');
+      });
+
+      // Activate clicked link
+      link.classList.add('ug-tabs__link--active');
+
+      // Activate matching panel
+      var panel = tabs.querySelector('[data-ug-panel="' + target + '"]');
+      if (panel) {
+        panel.classList.add('ug-tabs__panel--active');
+      }
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/src/scss/_accordion.scss

@@ -1,123 +1,123 @@
-// ==========================================================================
-// Unigrid CSS Framework — Accordion (BEM)
-//
-// Pure HTML/CSS accordion using <details>/<summary>. No JS required.
-// Caret rotates when open.
-//
-// Block: .ug-accordion
-// Elements: __item, __header, __caret, __body
-// Modifiers: --bordered, --flush, --dark
-// ==========================================================================
-
-@use "variables" as *;
-@use "mixins" as *;
-
-.ug-accordion {
-
-  // ---- Item (details element) ----
-  &__item {
-    border-bottom: 1px solid $ug-light-gray;
-
-    &[open] > .ug-accordion__header .ug-accordion__caret {
-      transform: rotate(-135deg);
-    }
-  }
-
-  // ---- Header (summary element) ----
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: calc(var(--ug-leading) * 0.5) 0;
-    @include ug-font-size("base");
-    @include ug-font-weight("bold");
-    @include ug-rhythm-line-height(1);
-    cursor: pointer;
-    list-style: none;
-    user-select: none;
-    transition: color 0.15s;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &::marker {
-      content: "";
-    }
-
-    &:hover {
-      color: $ug-medium-gray;
-    }
-  }
-
-  // ---- Caret ----
-  &__caret {
-    display: inline-block;
-    width: 0.6em;
-    height: 0.6em;
-    border-right: 2px solid currentColor;
-    border-bottom: 2px solid currentColor;
-    transform: rotate(45deg);
-    transition: transform 0.2s;
-    flex-shrink: 0;
-    margin-left: var(--ug-leading);
-  }
-
-  // ---- Body ----
-  &__body {
-    padding: 0 0 var(--ug-leading) 0;
-    @include ug-font-size("sm");
-    @include ug-rhythm-line-height(1);
-    color: $ug-dark-gray;
-  }
-
-  // ==============================
-  // Modifiers
-  // ==============================
-
-  // Bordered: border on all sides
-  &--bordered {
-    border: 1px solid $ug-light-gray;
-
-    .ug-accordion__item {
-      border-bottom: 1px solid $ug-light-gray;
-
-      &:last-child {
-        border-bottom: none;
-      }
-    }
-
-    .ug-accordion__header {
-      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
-    }
-
-    .ug-accordion__body {
-      padding: 0 var(--ug-leading) var(--ug-leading);
-    }
-  }
-
-  // Flush: no borders at all
-  &--flush {
-    .ug-accordion__item {
-      border-bottom: none;
-    }
-  }
-
-  // Dark
-  &--dark {
-    background-color: $ug-black;
-    color: $ug-white;
-
-    .ug-accordion__item {
-      border-bottom-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .ug-accordion__header:hover {
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    .ug-accordion__body {
-      color: rgba(255, 255, 255, 0.7);
-    }
-  }
-}
+// ==========================================================================
+// Unigrid CSS Framework — Accordion (BEM)
+//
+// Pure HTML/CSS accordion using <details>/<summary>. No JS required.
+// Caret rotates when open.
+//
+// Block: .ug-accordion
+// Elements: __item, __header, __caret, __body
+// Modifiers: --bordered, --flush, --dark
+// ==========================================================================
+
+@use "variables" as *;
+@use "mixins" as *;
+
+.ug-accordion {
+
+  // ---- Item (details element) ----
+  &__item {
+    border-bottom: 1px solid $ug-light-gray;
+
+    &[open] > .ug-accordion__header .ug-accordion__caret {
+      transform: rotate(-135deg);
+    }
+  }
+
+  // ---- Header (summary element) ----
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: calc(var(--ug-leading) * 0.5) 0;
+    @include ug-font-size("base");
+    @include ug-font-weight("bold");
+    @include ug-rhythm-line-height(1);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+    transition: color 0.15s;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      content: "";
+    }
+
+    &:hover {
+      color: $ug-medium-gray;
+    }
+  }
+
+  // ---- Caret ----
+  &__caret {
+    display: inline-block;
+    width: 0.6em;
+    height: 0.6em;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg);
+    transition: transform 0.2s;
+    flex-shrink: 0;
+    margin-left: var(--ug-leading);
+  }
+
+  // ---- Body ----
+  &__body {
+    padding: 0 0 var(--ug-leading) 0;
+    @include ug-font-size("sm");
+    @include ug-rhythm-line-height(1);
+    color: $ug-dark-gray;
+  }
+
+  // ==============================
+  // Modifiers
+  // ==============================
+
+  // Bordered: border on all sides
+  &--bordered {
+    border: 1px solid $ug-light-gray;
+
+    .ug-accordion__item {
+      border-bottom: 1px solid $ug-light-gray;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .ug-accordion__header {
+      padding: calc(var(--ug-leading) * 0.5) var(--ug-leading);
+    }
+
+    .ug-accordion__body {
+      padding: 0 var(--ug-leading) var(--ug-leading);
+    }
+  }
+
+  // Flush: no borders at all
+  &--flush {
+    .ug-accordion__item {
+      border-bottom: none;
+    }
+  }
+
+  // Dark
+  &--dark {
+    background-color: $ug-black;
+    color: $ug-white;
+
+    .ug-accordion__item {
+      border-bottom-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .ug-accordion__header:hover {
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    .ug-accordion__body {
+      color: rgba(255, 255, 255, 0.7);
+    }
+  }
+}