@keenmate/pure-css 1.0.0-rc03 → 1.0.0-rc05

package/src/js/navbar-dropdown.js

@@ -0,0 +1,164 @@
+/**
+ * Pure CSS — Navbar Dropdown (touch support for hover dropdowns)
+ *
+ * The navbar dropdowns (`.pc-navmenu__item--has-dropdown`) open on
+ * `:hover` — which never fires on touch. When the dropdown parent is ALSO a
+ * real link (e.g. Components → /components/overview), a tap just follows the
+ * href and the submenu can never be seen. This module fixes that on touch
+ * devices with the "first tap opens, second tap navigates" model:
+ *
+ *   - 1st tap on the parent's own link  → open its submenu (navigation
+ *                                          suppressed), closing any sibling.
+ *   - 2nd tap on the SAME (now-open)     → follow the link normally.
+ *     parent
+ *   - A parent whose href is "#"/empty   → pure toggle (never navigates); the
+ *     (a bare toggler, e.g. "More ›")      2nd tap closes it.
+ *   - Tap outside / Escape               → close all open.
+ *
+ * It only engages on `(hover: none)` devices — desktop / hover-capable input
+ * keeps the plain CSS hover-reveal and normal link navigation, untouched.
+ * Nested parents work too (the tapped item and its ancestors stay open).
+ *
+ * Deliberately skipped:
+ *   - `.pc-navmenu__more-menu` — the collapse "More" panel flattens submenus to
+ *     always-visible inline links (fit.js + _navbar-elements.scss),
+ *     so there's nothing to toggle there.
+ *   - `.pc-navmenu__item--more` — the collapse "More" trigger owns its own
+ *     click handling.
+ *
+ * Pairs with the CSS in `_navbar-elements.scss`, where the hover-reveal is
+ * gated behind `@media (hover: hover)` and an `.is-open` class reveal (toggled
+ * here) drives the open state on touch.
+ *
+ * No configuration; auto-inits. Public API (pureCss.components.navDropdown):
+ *   closeAll()      — close every open navbar dropdown
+ */
+(function () {
+    'use strict';
+
+    var OPEN = 'is-open';
+    var PARENT = '.pc-navmenu__item--has-dropdown';
+
+    // Only take over on devices without hover — evaluated per-interaction so a
+    // hybrid device (touch + mouse) that reports hover keeps native navigation.
+    function noHover() {
+        return !!(window.matchMedia && window.matchMedia('(hover: none)').matches);
+    }
+
+    // The parent li's OWN dropdown (direct child), not a descendant submenu.
+    function directSubmenu(li) {
+        for (var c = li.firstElementChild; c; c = c.nextElementSibling) {
+            if (c.classList && c.classList.contains('pc-navmenu__dropdown')) return c;
+        }
+        return null;
+    }
+
+    // The parent li's OWN toggle link (direct child <a>).
+    function directLink(li) {
+        for (var c = li.firstElementChild; c; c = c.nextElementSibling) {
+            if (c.tagName && c.tagName.toLowerCase() === 'a') return c;
+        }
+        return null;
+    }
+
+    function setExpanded(li, on) {
+        var a = directLink(li);
+        if (a) a.setAttribute('aria-expanded', on ? 'true' : 'false');
+    }
+
+    function openItem(li) {
+        // Close everything that isn't `li` or one of its ancestors, so opening a
+        // nested submenu keeps its parents open but folds away sibling branches.
+        var open = document.querySelectorAll(PARENT + '.' + OPEN);
+        for (var i = 0; i < open.length; i++) {
+            if (open[i] === li || open[i].contains(li)) continue;
+            open[i].classList.remove(OPEN);
+            setExpanded(open[i], false);
+        }
+        li.classList.add(OPEN);
+        setExpanded(li, true);
+    }
+
+    function closeItem(li) {
+        li.classList.remove(OPEN);
+        setExpanded(li, false);
+    }
+
+    function closeAll() {
+        var open = document.querySelectorAll(PARENT + '.' + OPEN);
+        for (var i = 0; i < open.length; i++) closeItem(open[i]);
+    }
+
+    function onClick(e) {
+        var link = e.target.closest ? e.target.closest('a') : null;
+
+        // A tap that isn't on a dropdown parent's own link: if it's fully
+        // outside any dropdown, close everything; otherwise (a submenu child
+        // link, or non-link chrome inside a dropdown) leave it to navigate.
+        if (!link || link.parentNode == null) {
+            if (!e.target.closest || !e.target.closest(PARENT)) closeAll();
+            return;
+        }
+
+        var li = link.parentNode;
+        var isToggle = li.classList &&
+            li.classList.contains('pc-navmenu__item--has-dropdown') &&
+            directLink(li) === link &&        // the parent's OWN link, not a child
+            !link.closest('.pc-navmenu__more-menu') && // not the flattened panel
+            !li.classList.contains('pc-navmenu__item--more'); // not the More trigger
+
+        if (!isToggle) {
+            // Clicked a normal link (incl. submenu children): close open menus
+            // unless the click is inside one that should stay while navigating.
+            if (!link.closest(PARENT)) closeAll();
+            return;
+        }
+
+        if (!directSubmenu(li)) return; // parent flagged has-dropdown but empty
+        if (!noHover()) return;         // hover device → native nav + CSS hover
+
+        var href = link.getAttribute('href') || '';
+        var togglerOnly = href === '' || href === '#' || href.charAt(href.length - 1) === '#';
+
+        if (!li.classList.contains(OPEN)) {
+            e.preventDefault();          // 1st tap → open, don't navigate
+            openItem(li);
+        } else if (togglerOnly) {
+            e.preventDefault();          // bare toggler → 2nd tap closes
+            closeItem(li);
+        }
+        // else: open + real href → fall through, browser follows the link.
+    }
+
+    function onKey(e) {
+        if (e.key === 'Escape' || e.keyCode === 27) closeAll();
+    }
+
+    // A11y: advertise the popup + initial collapsed state on each parent's own
+    // link (skipping the flattened panel and the collapse trigger).
+    function init(scope) {
+        var parents = (scope || document).querySelectorAll(PARENT);
+        for (var i = 0; i < parents.length; i++) {
+            var li = parents[i];
+            if (li.closest('.pc-navmenu__more-menu')) continue;
+            if (li.classList.contains('pc-navmenu__item--more')) continue;
+            var a = directLink(li);
+            if (a && directSubmenu(li)) {
+                a.setAttribute('aria-haspopup', 'true');
+                if (!a.hasAttribute('aria-expanded')) a.setAttribute('aria-expanded', 'false');
+            }
+        }
+    }
+
+    document.addEventListener('click', onClick);
+    document.addEventListener('keydown', onKey);
+
+    var pa = (window.pureCss = window.pureCss || {});
+    (pa.components = pa.components || {}).navDropdown = { closeAll: closeAll, init: init };
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () { init(); });
+    } else {
+        init();
+    }
+})();

package/src/js/pure-css.js

@@ -0,0 +1,305 @@
+/**
+ * Pure CSS — shared foundation runtime namespace (window.pureCss)
+ *
+ * ONE global for the foundation layer. The app-shell engines (fit,
+ * navbar-dropdown, sidebar-resize, container-breakpoint) and every downstream
+ * framework hang their public handle, cross-component signals, and diagnostics
+ * off this object instead of scattering `window.PaThing` globals.
+ *
+ * This is the FOUNDATION half of what used to be pure-admin.js. It installs the
+ * parts that must exist exactly once — the event bus, the debug registry, the
+ * viewport source, the OS colour-scheme source, capability-first device
+ * classification, the overlay primitives, the open-menu registry, the
+ * components registry + initAll, and the FOUNDATION config defaults
+ * (mobileBreakpoint, typingDebounceDelay, tabletMinShortSide, fit,
+ * containerBreakpoint — the ones the moved engines read).
+ *
+ * pure-admin.js (the admin facade) ADOPTS these buses by reference when it
+ * loads on top, and layers the admin-only config defaults (transition, toast,
+ * severity) onto the shared config. When pure-admin is absent (pure-css loaded
+ * standalone) this runtime stands on its own.
+ *
+ * Load-order-safe by construction: this file, and every engine, opens with
+ *
+ *     var pc = (window.pureCss = window.pureCss || {});
+ *
+ * so the namespace exists no matter which script parses first.
+ *
+ * Surface:
+ *   pureCss.events        on(topic,fn)->off / once / off / emit(topic,payload)
+ *   pureCss.viewport      { width, height, orientation } live snapshot; emits
+ *                         'viewport:resize' (rAF-throttled) + 'viewport:orientation'
+ *   pureCss.colorScheme   { mode: 'light'|'dark' } live OS preference; emits
+ *                         'colorscheme:change'
+ *   pureCss.device        { class: 'mobile'|'tablet'|'desktop', isTouchPrimary }
+ *   pureCss.overlay       lockBodyScroll() -> release; observeKeyboardInset(el)
+ *   pureCss.config        shared UI-behavior baseline (foundation half)
+ *   pureCss.components     per-component handles ({init, initAll, …}); initAll(scope)
+ *   pureCss.menus          open-menu coordination registry (register/closeOthers)
+ *   pureCss.debug          enable/disable/isEnabled/log/aspects
+ */
+(function () {
+  'use strict';
+
+  var pa = (window.pureCss = window.pureCss || {});
+  pa.components = pa.components || {};
+
+  // --- events: a tiny topic bus -----------------------------------------
+  if (!pa.events) {
+    var topics = {}; // { [topic]: Set<fn> }
+    pa.events = {
+      on: function (topic, fn) {
+        (topics[topic] || (topics[topic] = new Set())).add(fn);
+        return function off() { if (topics[topic]) topics[topic].delete(fn); };
+      },
+      once: function (topic, fn) {
+        var off = pa.events.on(topic, function (payload) { off(); fn(payload); });
+        return off;
+      },
+      off: function (topic, fn) { if (topics[topic]) topics[topic].delete(fn); },
+      emit: function (topic, payload) {
+        if (!topics[topic]) return;
+        topics[topic].forEach(function (fn) {
+          try { fn(payload); } catch (e) { pa.debug.log('events', 'listener threw for', topic, e); }
+        });
+      },
+      // Introspection for the future debug console.
+      topics: function () { return Object.keys(topics); },
+      listenerCount: function (topic) { return topics[topic] ? topics[topic].size : 0; }
+    };
+  }
+
+  // --- debug: per-aspect toggles + log --------------------------------------
+  if (!pa.debug) {
+    var enabled = {}; // { [aspect]: true }
+    var known = {};   // every aspect name ever seen (for aspects())
+    pa.debug = {
+      enable: function (aspect) { enabled[aspect] = true; known[aspect] = true; },
+      disable: function (aspect) { enabled[aspect] = false; },
+      isEnabled: function (aspect) { known[aspect] = true; return enabled[aspect] === true; },
+      log: function (aspect) {
+        known[aspect] = true;
+        if (enabled[aspect] !== true) return;
+        var args = Array.prototype.slice.call(arguments, 1);
+        console.log.apply(console, ['[pc:' + aspect + ']'].concat(args));
+      },
+      // { aspect: enabled } for every aspect that's been enabled or probed.
+      aspects: function () {
+        var out = {};
+        Object.keys(known).forEach(function (k) { out[k] = enabled[k] === true; });
+        return out;
+      }
+    };
+  }
+
+  // --- viewport: the single owner of window-level resize/orientation --------
+  if (!pa.viewport) {
+    var vp = pa.viewport = { width: 0, height: 0, orientation: 'landscape' };
+    var raf = null;
+    function measure() {
+      vp.width = window.innerWidth;
+      vp.height = window.innerHeight;
+      // CSS-parity: "portrait" == taller-than-wide, device-agnostic.
+      vp.orientation = vp.height >= vp.width ? 'portrait' : 'landscape';
+    }
+    measure();
+    window.addEventListener('resize', function () {
+      if (raf) return; // coalesce a burst of resizes into one frame
+      raf = requestAnimationFrame(function () {
+        raf = null;
+        measure();
+        pa.events.emit('viewport:resize', vp);
+      });
+    }, { passive: true });
+
+    // Orientation via matchMedia — well-supported and fires on desktop pivot too.
+    var mq = window.matchMedia('(orientation: portrait)');
+    var onOrient = function () { measure(); pa.events.emit('viewport:orientation', vp); };
+    if (mq.addEventListener) mq.addEventListener('change', onOrient);
+    else if (mq.addListener) mq.addListener(onOrient); // Safari <14
+  }
+
+  // --- colorScheme: the single owner of the OS light/dark preference --------
+  if (!pa.colorScheme) {
+    var cs = pa.colorScheme = { mode: 'light' };
+    var csmq = window.matchMedia('(prefers-color-scheme: dark)');
+    var readScheme = function () { cs.mode = csmq.matches ? 'dark' : 'light'; };
+    readScheme();
+    var onScheme = function () { readScheme(); pa.events.emit('colorscheme:change', cs); };
+    if (csmq.addEventListener) csmq.addEventListener('change', onScheme);
+    else if (csmq.addListener) csmq.addListener(onScheme); // Safari <14
+  }
+
+  // --- config: the shared UI-behavior baseline (foundation half) ------------
+  // The engines that moved here (fit, container-breakpoint) + the shell pieces
+  // (device classification, sidebar-resize, search debounce) read these. The
+  // admin facade layers transition/toast/severity on top of this same object.
+  if (!pa.config) pa.config = {};
+  (function initConfig(cfg) {
+    // Read a numeric CSS variable off :root (px / ms / unitless → number).
+    function readCssNumber(name, fallback) {
+      try {
+        var raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+        var n = parseFloat(raw);
+        return isNaN(n) ? fallback : n;
+      } catch (e) { return fallback; }
+    }
+
+    // Fill only the keys a consumer hasn't already set (shallow).
+    function fillDefaults(target, defs) {
+      Object.keys(defs).forEach(function (k) {
+        if (target[k] === undefined) target[k] = defs[k];
+      });
+    }
+
+    // mobileBreakpoint (px) — SINGLE-SOURCED from SCSS $mobile-breakpoint via the
+    // --pc-mobile-breakpoint CSS var. Honour an explicit consumer override; else
+    // derive from CSS; else 768.
+    if (cfg.mobileBreakpoint == null) {
+      cfg.mobileBreakpoint = readCssNumber('--pc-mobile-breakpoint', 768);
+    }
+
+    // typingDebounceDelay (ms) — debounce for search / autocomplete / filter inputs.
+    if (cfg.typingDebounceDelay == null) {
+      cfg.typingDebounceDelay = 300;
+    }
+
+    // tabletMinShortSide (px) — the phone/tablet boundary applied to the SHORTER
+    // viewport side (Material sw600dp), consumed by pureCss.device.
+    if (cfg.tabletMinShortSide == null) {
+      cfg.tabletMinShortSide = 600;
+    }
+
+    // fit.* — the Fit engine (fit.js). defaultPriority is the priority a slot
+    // falls back to when it declares data-pc-fit but no data-pc-fit-priority.
+    cfg.fit = cfg.fit || {};
+    fillDefaults(cfg.fit, {
+      defaultPriority: 0
+    });
+
+    // containerBreakpoint.* — the Container Breakpoint engine. hysteresis is the
+    // dead-band applied at every threshold; hiddenClass is the utility class the
+    // engine toggles on [data-pc-show] descendants to hide them outside their mode(s).
+    cfg.containerBreakpoint = cfg.containerBreakpoint || {};
+    fillDefaults(cfg.containerBreakpoint, {
+      hysteresis: 1,
+      hiddenClass: 'd-none'
+    });
+  })(pa.config);
+
+  // --- device: capability-first device classification -----------------------
+  // Capability decides FIRST: a non-touch-primary pointer (a real mouse) is
+  // ALWAYS 'desktop' at any width. Only touch-primary devices consult the size
+  // line: SHORTER viewport side below config.tabletMinShortSide => 'mobile',
+  // else 'tablet'. Feature detection (matchMedia), not UA sniffing.
+  if (!pa.device) {
+    var dev = pa.device = { class: 'desktop', isTouchPrimary: false };
+    var coarseMq = window.matchMedia('(pointer: coarse)');
+    var hoverMq = window.matchMedia('(hover: hover)');
+    var classifyDevice = function () {
+      var touchPrimary = coarseMq.matches && !hoverMq.matches;
+      dev.isTouchPrimary = touchPrimary;
+      if (!touchPrimary) return 'desktop';
+      var shortSide = Math.min(window.innerWidth, window.innerHeight);
+      var line = (pa.config && pa.config.tabletMinShortSide) || 600;
+      return shortSide < line ? 'mobile' : 'tablet';
+    };
+    var reclassify = function () {
+      var next = classifyDevice();
+      if (next === dev.class) return;
+      dev.class = next;
+      pa.events.emit('device:change', dev);
+    };
+    dev.class = classifyDevice();
+    pa.events.on('viewport:resize', reclassify);
+    pa.events.on('viewport:orientation', reclassify);
+    if (coarseMq.addEventListener) {
+      coarseMq.addEventListener('change', reclassify);
+      hoverMq.addEventListener('change', reclassify);
+    } else if (coarseMq.addListener) { // Safari <14
+      coarseMq.addListener(reclassify);
+      hoverMq.addListener(reclassify);
+    }
+  }
+
+  // --- overlay: fullscreen-sheet primitives (scroll lock + keyboard inset) ---
+  if (!pa.overlay) {
+    var lockCount = 0;
+    var stashedOverflow = null;
+    pa.overlay = {
+      // Ref-counted body-scroll lock. Returns an idempotent release fn.
+      lockBodyScroll: function () {
+        if (lockCount === 0) {
+          stashedOverflow = document.body.style.overflow;
+          document.body.style.overflow = 'hidden';
+        }
+        lockCount++;
+        var released = false;
+        return function () {
+          if (released) return;
+          released = true;
+          lockCount = Math.max(0, lockCount - 1);
+          if (lockCount === 0 && stashedOverflow !== null) {
+            document.body.style.overflow = stashedOverflow;
+            stashedOverflow = null;
+          }
+        };
+      },
+      // Pin a fixed fullscreen panel's bottom edge above the soft keyboard by
+      // tracking window.visualViewport. Returns a cleanup. No-op where
+      // visualViewport is unavailable.
+      observeKeyboardInset: function (panel) {
+        var vv = window.visualViewport;
+        if (!vv || !panel) return function () {};
+        var raf = null;
+        var apply = function () {
+          raf = null;
+          panel.style.height = vv.height + 'px';
+          panel.style.top = vv.offsetTop + 'px';
+        };
+        var schedule = function () {
+          if (raf) return;
+          raf = requestAnimationFrame(apply);
+        };
+        vv.addEventListener('resize', schedule);
+        vv.addEventListener('scroll', schedule);
+        schedule();
+        return function () {
+          vv.removeEventListener('resize', schedule);
+          vv.removeEventListener('scroll', schedule);
+          panel.style.height = '';
+          panel.style.top = '';
+        };
+      }
+    };
+  }
+
+  // --- menus: open-menu coordination ----------------------------------------
+  if (!pa.menus) {
+    pa.menus = {
+      closers: [],
+      register: function (fn) { this.closers.push(fn); return fn; },
+      closeOthers: function (self) {
+        this.closers.forEach(function (fn) {
+          if (fn !== self) { try { fn(); } catch (e) { /* ignore */ } }
+        });
+        pa.events.emit('menu:opened', { id: self && self.paMenuId });
+      }
+    };
+  }
+
+  // --- components.initAll: init every registered component under a scope -----
+  if (!pa.components.initAll) {
+    pa.components.initAll = function (scope) {
+      Object.keys(pa.components).forEach(function (name) {
+        if (name === 'initAll') return;
+        var c = pa.components[name];
+        if (!c) return;
+        try {
+          if (typeof c.initAll === 'function') c.initAll(scope);
+          else if (typeof c.init === 'function') c.init(scope);
+        } catch (e) { pa.debug.log('components', name + '.initAll threw', e); }
+      });
+    };
+  }
+})();

package/src/js/sidebar-resize.js

@@ -0,0 +1,210 @@
+/**
+ * Pure CSS — Sidebar Resize
+ *
+ * Drag-to-resize the sidebar. Ships in the pure-css foundation (next to fit.js /
+ * navbar-dropdown.js) so consumers don't have to vendor it out of the demo:
+ * `--pc-local-sidebar-width` is documented in _sidebar.scss as "modified by JS
+ * for resize", and the `.pc-sidebar-resize` handle + `--pc-local-sidebar-min-
+ * width` / `--pc-local-sidebar-max-width` bounds are all core CSS — the driving
+ * script belongs here too.
+ *
+ * The drag bounds and rem<->px conversion are READ FROM CSS, not hardcoded:
+ *   --pc-local-sidebar-min-width  (default 18rem)  — smallest drag width
+ *   --pc-local-sidebar-max-width  (default 50rem)  — largest drag width
+ * and rem is converted using the actual root font-size (this framework uses a
+ * 10px base, but a consumer/theme that changes it — or the min/max vars — stays
+ * consistent with the drag limits automatically). Earlier versions baked in
+ * 180/500/288 px and a `/10` rem factor, which silently drifted from these vars.
+ *
+ * Activate by putting `.pc-layout__sidebar--resizable` on the sidebar (the demo
+ * settings panel toggles it). The `.pc-sidebar-resize` handle is created on the
+ * fly; double-click it to reset to the stylesheet default.
+ *
+ * Public API (pureCss.components.sidebarResize): init, reset, setWidth, getWidth.
+ * Emits `sidebar:resize` ({width}) on the pureCss event bus at drag end.
+ */
+(function () {
+    'use strict';
+
+    var STORAGE_KEY = 'sidebar-width'; // persisted in px
+
+    // Below this width the sidebar is an overlay drawer — resize is meaningless.
+    // Single-sourced from window.pureCss.config.mobileBreakpoint (which derives
+    // from the --pc-mobile-breakpoint CSS var / SCSS $mobile-breakpoint), so this
+    // guard and the CSS `.pc-sidebar-resize { display: none }` mobile rule can't
+    // drift apart. Falls back to 768 if the namespace isn't present yet.
+    function mobileMax() {
+        var pa = window.pureCss;
+        return (pa && pa.config && pa.config.mobileBreakpoint) || 768;
+    }
+
+    var sidebar = null;
+    var resizeHandle = null;
+    var isResizing = false;
+    var startX = 0;
+    var startWidth = 0;
+    var bounds = { min: 0, max: 0 };
+    var initialized = false;
+    var rafId = null;
+
+    // --- CSS-variable helpers ------------------------------------------------
+    // Root font-size in px (this framework uses 10px; read it so a changed base
+    // doesn't break the px<->rem conversion).
+    function rootFontSize() {
+        return parseFloat(getComputedStyle(document.documentElement).fontSize) || 10;
+    }
+
+    // Read a length CSS variable off :root and return it in px. Handles rem, px,
+    // and bare numbers (treated as px); falls back to fallbackPx if unset.
+    function readPxVar(name, fallbackPx) {
+        var raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+        if (!raw) return fallbackPx;
+        var n = parseFloat(raw);
+        if (isNaN(n)) return fallbackPx;
+        if (raw.indexOf('rem') !== -1) return n * rootFontSize();
+        return n; // px or unitless
+    }
+
+    // Re-read the drag bounds from CSS (called at drag start, so a runtime theme
+    // switch that changes the min/max is honoured without re-init).
+    function refreshBounds() {
+        bounds.min = readPxVar('--pc-local-sidebar-min-width', 180);
+        bounds.max = readPxVar('--pc-local-sidebar-max-width', 500);
+    }
+
+    // --- init ----------------------------------------------------------------
+    function init() {
+        if (initialized && resizeHandle && resizeHandle.parentNode) return;
+
+        sidebar = document.querySelector('.pc-layout__sidebar--resizable');
+        if (!sidebar) return;
+
+        var existingHandle = sidebar.querySelector('.pc-sidebar-resize');
+        if (existingHandle) {
+            resizeHandle = existingHandle;
+            initialized = true;
+            return;
+        }
+
+        resizeHandle = document.createElement('div');
+        resizeHandle.className = 'pc-sidebar-resize';
+        resizeHandle.setAttribute('title', 'Drag to resize sidebar');
+        sidebar.appendChild(resizeHandle);
+
+        loadSavedWidth();
+
+        resizeHandle.addEventListener('mousedown', startResize);
+        resizeHandle.addEventListener('touchstart', startResize, { passive: false });
+        resizeHandle.addEventListener('dblclick', resetWidth); // reset to default
+
+        initialized = true;
+    }
+
+    function loadSavedWidth() {
+        var saved = localStorage.getItem(STORAGE_KEY);
+        if (!saved) return;
+        var width = parseInt(saved, 10);
+        if (isNaN(width)) return;
+        refreshBounds();
+        if (width >= bounds.min && width <= bounds.max) setSidebarWidth(width);
+    }
+
+    // Write width (px) as rem on :root, using the real root font-size.
+    // Flag body so the tablet-band (769–1024px) width rule honours this explicit
+    // width instead of the min() cap — without the flag the cap clamps every
+    // draggable width (drag floor 18rem > 16rem cap) and the handle looks dead.
+    function setSidebarWidth(width) {
+        var rem = width / rootFontSize();
+        document.documentElement.style.setProperty('--pc-local-sidebar-width', rem + 'rem');
+        document.body.classList.add('pc-sidebar-resized');
+    }
+
+    function getCurrentWidth() {
+        return sidebar ? sidebar.offsetWidth : readPxVar('--pc-local-sidebar-width', 288);
+    }
+
+    function startResize(e) {
+        // Skip when the sidebar is collapsed or on mobile (overlay mode).
+        if (document.body.classList.contains('sidebar-hidden') ||
+            window.innerWidth <= mobileMax()) {
+            return;
+        }
+
+        e.preventDefault();
+        isResizing = true;
+        refreshBounds(); // pick up any theme-driven min/max change
+
+        startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
+        startWidth = getCurrentWidth();
+
+        resizeHandle.classList.add('pc-sidebar-resize--active');
+        document.body.classList.add('pc-sidebar-resizing');
+
+        document.addEventListener('mousemove', doResize);
+        document.addEventListener('mouseup', stopResize);
+        document.addEventListener('touchmove', doResize, { passive: false });
+        document.addEventListener('touchend', stopResize);
+        document.addEventListener('touchcancel', stopResize); // clean up if the browser cancels the touch
+    }
+
+    // Throttled with requestAnimationFrame.
+    function doResize(e) {
+        if (!isResizing) return;
+        e.preventDefault();
+
+        var currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
+        if (rafId) cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(function () {
+            var diff = currentX - startX;
+            var newWidth = Math.max(bounds.min, Math.min(bounds.max, startWidth + diff));
+            setSidebarWidth(newWidth);
+        });
+    }
+
+    function stopResize() {
+        if (!isResizing) return;
+        isResizing = false;
+
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+            rafId = null;
+        }
+
+        resizeHandle.classList.remove('pc-sidebar-resize--active');
+        document.body.classList.remove('pc-sidebar-resizing');
+
+        document.removeEventListener('mousemove', doResize);
+        document.removeEventListener('mouseup', stopResize);
+        document.removeEventListener('touchmove', doResize);
+        document.removeEventListener('touchend', stopResize);
+        document.removeEventListener('touchcancel', stopResize);
+
+        var finalWidth = getCurrentWidth();
+        localStorage.setItem(STORAGE_KEY, finalWidth.toString());
+        if (window.pureCss && window.pureCss.events) {
+            window.pureCss.events.emit('sidebar:resize', { width: finalWidth });
+        }
+    }
+
+    // Reset by dropping the inline override so the stylesheet default applies
+    // (the base $sidebar-width, or the tablet cap in the 769–1024px band).
+    function resetWidth() {
+        document.documentElement.style.removeProperty('--pc-local-sidebar-width');
+        document.body.classList.remove('pc-sidebar-resized');
+        localStorage.removeItem(STORAGE_KEY);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+
+    var pa = (window.pureCss = window.pureCss || {});
+    (pa.components = pa.components || {}).sidebarResize = {
+        init: init,
+        reset: resetWidth,
+        setWidth: setSidebarWidth,
+        getWidth: getCurrentWidth
+    };
+})();