@ulu/frontend 0.2.0-beta.9 → 0.2.1

package/lib/js/exports.md

@@ -92,6 +92,7 @@ These exports originate from the `lib/js/ui/` directory.
 - `sliderInit`
 - `sliderInitializer`
 - `sliderSetupSlider`
+- `TabManager`
 - `tabsInit`
 - `tabsInitializer`
 - `tabsInstances`

package/lib/js/ui/index.js

@@ -143,6 +143,10 @@ export {
   Slider,
 } from "./slider.js";
 
+export {
+  TabManager,
+} from "./tab-manager.js";
+
 export {
   init as tabsInit,
   initializer as tabsInitializer,

package/lib/js/ui/slider.js

@@ -32,7 +32,6 @@
 
 import { ComponentInitializer } from "../core/component.js";
 import { wrapSettingString } from "../core/settings.js";
-import maintain from 'ally.js/maintain/_maintain';
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { debounce } from "@ulu/utils/performance.js";
@@ -392,8 +391,9 @@ export class Slider {
     }
 
     // Make all slide interactive elements inert
-    const lockInteractives = maintain.disabled({ context: this.elements.track  });
+    this.elements.track.inert = true;
     this.transitioning = true;
+
     // Set classes first just feels better
     if (old) old.navButton.classList.remove(activeClass);
     slide.navButton.classList.add(activeClass);
@@ -403,8 +403,8 @@ export class Slider {
       this.index = index;
       this.slide = slide;
       this.transitioning = false;
+      this.elements.track.inert = false;
       elements.container.classList.remove(transitionClass);
-      lockInteractives.disengage();
       if (!isInit) {
         slide.element.focus();
         this.emit("goto", [event, index, slide]);

package/lib/js/ui/tab-manager.js

@@ -0,0 +1,324 @@
+/**
+ * @module ui/tab-manager
+ */
+
+import { ensureId } from "../utils/id.js";
+import { getCoreEventName } from "../core/events.js";
+
+/**
+ * @typedef {Object} TabManagerOptions
+ * @property {String|null} [orientation=null] - "horizontal"|"vertical", auto-detected if omitted.
+ * @property {Number} [initialIndex=0] - Index to activate on load.
+ * @property {Boolean} [allArrows=false] - Allow all arrow keys to navigate regardless of orientation.
+ * @property {Boolean} [openByUrlHash=false] - Activate tab based on URL hash on initialization.
+ * @property {Boolean} [setUrlHash=false] - Update URL hash when a new tab is activated.
+ * @property {Boolean} [equalHeights=false] - Automatically match the height of all panels.
+ * @property {Function|null} [onReady=null] - Callback fired after initialization: (instance) => {}
+ * @property {Function|null} [onChange=null] - Callback fired when tab changes: (active, previous) => {}
+ */
+
+/**
+ * Class for managing  Aria tabs
+ * - Designed to be minimal and lightweight but cover all traditional needs
+ * - Designed for static / traditional webpages (not SPA)
+ * - Separated from tabs.js so it can be used by itself as needed (tree-shaking)
+ */
+export class TabManager {
+  /**
+   * Default options for TabManager.
+   * @type {TabManagerOptions}
+   */
+  static defaults = {
+    orientation: null,
+    initialIndex: 0,
+    allArrows: false,
+    openByUrlHash: false,
+    setUrlHash: false,
+    equalHeights: false,
+    onReady: null,
+    onChange: null
+  };
+
+  /**
+   * @param {HTMLElement} tablistElement - The element with role="tablist"
+   * @param {Partial<TabManagerOptions>} [options] - Configuration options.
+   */
+  constructor(tablistElement, options = {}) {
+    this.tablist = tablistElement;
+    this.options = { ...TabManager.defaults, ...options };
+    this.tabs = Array.from(this.tablist.children);
+    
+    // Discover panels via `aria-controls`
+    this.panels = this.tabs.map(tab => {
+      const controlsId = tab.getAttribute('aria-controls');
+      return controlsId ? document.getElementById(controlsId) : null;
+    }).filter(Boolean); // Ensure no nulls in panels array
+    
+    this.currentIndex = -1; 
+    
+    // Bind methods
+    this.handleKeydown = this.handleKeydown.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+
+    // Bind the new height update method for the event listener
+    this.updatePanelHeights = this.updatePanelHeights.bind(this);
+
+    if (this.tabs.length === 0 || this.tabs.length !== this.panels.length) {
+      console.warn("TabManager: Tab/Panel count mismatch. Check aria-controls.", { tabs: this.tabs, panels: this.panels });
+      return;
+    }
+
+    this.orientation = this.options.orientation || this.tablist.getAttribute("aria-orientation") || "horizontal";
+
+    this.setupAttributes();
+    this.attachListeners();
+    
+    // Handle initial state from URL hash if configured
+    let startingIndex = this.options.initialIndex;
+    if (this.options.openByUrlHash) {
+      const hash = window.location.hash.substring(1);
+      const hashIndex = this.tabs.findIndex(tab => tab.id === hash);
+      if (hashIndex > -1) {
+        startingIndex = hashIndex;
+      }
+    }
+
+    this.activate(startingIndex, false); 
+
+    // Handle equal heights on init and on resize
+    if (this.options.equalHeights) {
+      this.updatePanelHeights();
+      document.addEventListener(getCoreEventName('pageResized'), this.updatePanelHeights);
+    }
+
+    if (this.options.onReady) {
+      this.options.onReady(this);
+    }
+  }
+
+  /**
+   * Sets the necessary ARIA attributes and initial states for tabs and panels.
+   * @private
+   */
+  setupAttributes() {
+    this.tablist.setAttribute("role", "tablist");
+
+    this.tabs.forEach((tab, index) => {
+      const panel = this.panels[index];
+      
+      // Ensure elements have IDs for ARIA attributes
+      ensureId(tab);
+      ensureId(panel);
+
+      // Set ARIA Roles & Relationships
+      tab.setAttribute("role", "tab");
+      // This is now the primary link, but we still ensure it's set.
+      if (!tab.hasAttribute('aria-controls')) {
+        tab.setAttribute("aria-controls", panel.id);
+      }
+      
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", tab.id);
+      
+      // Initial hidden state
+      panel.hidden = true;
+      tab.setAttribute("tabindex", "-1");
+      tab.setAttribute("aria-selected", "false");
+    });
+  }
+
+  /**
+   * Attaches click and keydown event listeners to each tab.
+   * @private
+   */
+  attachListeners() {
+    this.tabs.forEach(tab => {
+      tab.addEventListener("click", this.handleClick);
+      tab.addEventListener("keydown", this.handleKeydown);
+    });
+  }
+
+  /**
+   * Handles click events on tabs, activating the corresponding panel.
+   * @param {MouseEvent} e - The click event.
+   * @private
+   */
+  handleClick(e) {
+    const index = this.tabs.indexOf(e.currentTarget);
+    this.activate(index);
+  }
+
+  /**
+   * Handles keyboard navigation (arrows, Home, End) on the tab list.
+   * @param {KeyboardEvent} e - The keydown event.
+   * @private
+   */
+  handleKeydown(e) {
+    const index = this.tabs.indexOf(e.currentTarget);
+    let nextIndex = null;
+    const isVert = this.orientation === "vertical";
+    const allArrows = this.options.allArrows;
+    const isRtl = (this.tablist.dir === 'rtl' || document.dir === 'rtl') && this.tablist.dir !== 'ltr';
+
+    const keyNext = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const keyPrev = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+    // Vertical movement
+    if (e.key === "ArrowDown") {
+      if (isVert || allArrows) nextIndex = (index + 1) % this.tabs.length;
+    } else if (e.key === "ArrowUp") {
+      if (isVert || allArrows) nextIndex = (index - 1 + this.tabs.length) % this.tabs.length;
+    // Horizontal movement
+    } else if (e.key === keyNext) {
+      if (!isVert || allArrows) nextIndex = (index + 1) % this.tabs.length;
+    } else if (e.key === keyPrev) {
+      if (!isVert || allArrows) nextIndex = (index - 1 + this.tabs.length) % this.tabs.length;
+    // Other keys
+    } else if (e.key === "Home") {
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      nextIndex = this.tabs.length - 1;
+    }
+
+    if (nextIndex !== null) {
+      e.preventDefault();
+      this.activate(nextIndex);
+      this.tabs[nextIndex].focus();
+    }
+  }
+
+  /**
+   * Activates a tab. Can be called with an index or a tab ID string.
+   * @param {Number|String} indexOrId - The index or ID of the tab to activate.
+   * @param {Boolean} [triggerActions=true] - If false, will not fire onChange or set URL hash.
+   */
+  activate(indexOrId, triggerActions = true) {
+    let index = -1;
+    if (typeof indexOrId === "string") {
+      index = this.tabs.findIndex(tab => tab.id === indexOrId);
+    } else {
+      index = indexOrId;
+    }
+
+    if (index < 0 || index >= this.tabs.length) return;
+    if (this.currentIndex === index) return;
+
+    const prevIndex = this.currentIndex;
+    const prevTab = prevIndex > -1 ? this.tabs[prevIndex] : null;
+    const prevPanel = prevIndex > -1 ? this.panels[prevIndex] : null;
+
+    // Deactivate Current
+    if (prevTab) {
+      prevTab.setAttribute("aria-selected", "false");
+      prevTab.setAttribute("tabindex", "-1");
+      prevPanel.hidden = true;
+    }
+
+    // Activate New
+    const tab = this.tabs[index];
+    const panel = this.panels[index];
+
+    tab.setAttribute("aria-selected", "true");
+    tab.setAttribute("tabindex", "0");
+    panel.hidden = false;
+
+    this.currentIndex = index;
+
+    // Update URL hash if configured and not the initial silent activation
+    if (triggerActions && this.options.setUrlHash && window.history) {
+      window.history.replaceState(null, "", `#${ tab.id }`);
+    }
+
+    // Fire onChange callback
+    if (triggerActions && this.options.onChange) {
+      this.options.onChange(
+        { index, tab, panel },
+        { index: prevIndex, tab: prevTab, panel: prevPanel }
+      );
+    }
+  }
+
+  /**
+   * Public method to activate a tab by its ID.
+   * @param {String} id - The ID of the tab element to activate.
+   */
+  activateById(id) {
+    this.activate(id, true);
+  }
+
+  /**
+   * Calculates and applies equal heights to all panels.
+   * Waits for images within panels to load before calculating.
+   */
+  updatePanelHeights() {
+    if (!this.panels || this.panels.length === 0) return;
+
+    const parent = this.panels[0].parentElement;
+    if (!parent) return;
+    const images = [ ...parent.querySelectorAll("img") ];
+
+    const imagePromise = (image) => new Promise((resolve) => {
+      if (image.complete) return resolve(image);
+      image.onload = () => resolve(image);
+      image.onerror = () => resolve(image); // Resolve on error so it doesn't block
+    });
+
+    const imagePromises = images.map(imagePromise);
+
+    Promise.all(imagePromises).then(() => {
+      // Reset heights to auto before measuring to get natural height
+      this.panels.forEach(panel => {
+        panel.style.minHeight = '';
+      });
+
+      const heights = this.panels.map(panel => {
+        const wasHidden = panel.hidden;
+        panel.hidden = false;
+        const panelHeight = panel.offsetHeight;
+        panel.hidden = wasHidden;
+        return panelHeight;
+      });
+
+      const max = Math.max(...heights);
+      if (max > 0) {
+        this.panels.forEach(panel => {
+          panel.style.minHeight = `${ max }px`;
+        });
+      }
+    });
+  }
+
+  /**
+   * Removes event listeners, cleans up ARIA attributes, and resets the DOM to its pre-initialized state.
+   */
+  destroy() {
+    this.tabs.forEach(tab => {
+      tab.removeEventListener("click", this.handleClick);
+      tab.removeEventListener("keydown", this.handleKeydown);
+    });
+    if (this.options.equalHeights) {
+      document.removeEventListener(getCoreEventName('pageResized'), this.updatePanelHeights);
+    }
+
+    this.tablist.removeAttribute("role");
+    
+    this.tabs.forEach(tab => {
+      tab.removeAttribute("role");
+      tab.removeAttribute("aria-selected");
+      tab.removeAttribute("tabindex");
+    });
+
+    this.panels.forEach(panel => {
+      panel.removeAttribute("role");
+      panel.removeAttribute("aria-labelledby");
+      panel.hidden = false;
+      panel.style.minHeight = '';
+    });
+
+    this.tablist = null;
+    this.tabs = [];
+    this.panels = [];
+    this.options = {};
+    this.currentIndex = -1;
+  }
+}

package/lib/js/ui/tabs.js

@@ -2,14 +2,9 @@
  * @module ui/tabs
  */
 
-// TODO:
-// - For Vertical tabs we should be updating the orientation when on mobile. 
-//   Currently using all arrows so that the interface works in both 
-//   orientations when vertical. Leaving that behavior for now but maybe consider
-//   setting this up to destroy tab interface when ui layout changes?
-
-import AriaTablist from "aria-tablist";
+import { TabManager } from "./tab-manager.js";
 import { ComponentInitializer } from "../core/component.js";
+import { ensureId } from "../utils/id.js";
 
 /**
  * Array of current tab instances (exported if you need to interact with them)
@@ -38,11 +33,8 @@ export function init() {
         initialize();
       }
     });
-    
-    // Run this on page load, optionally exported for use when page is running
-    instances.forEach(openByCurrentHash);
   };
-  
+
   if (document.readyState === "complete") {
     initial();
   } else {
@@ -51,97 +43,46 @@ export function init() {
 }
 
 /**
- * 
- * @param {Node} element Tablist Element
- * @param {Node} options Options to set as defaults (can be overridden by element dataset options)
- * @return {Object} Instance object
+ * Setup a new TabManager instance
+ * @param {HTMLElement} element Tablist Element
+ * @param {object} options Options to set as defaults
+ * @return {object} Instance object
  */
 export function setup(element, options = {}) {
-  const config = Object.assign({}, options);
+  const config = { ...options };
 
+  // Backwards compatibility, `vertical:true` implies `allArrows:true`
   if (config.vertical) {
     config.allArrows = true;
   }
 
-  // Need to render the markup before checking height
-  //  - used to wait until images had loaded
-  const instance = { element, options };
-  instance.ariaTablist = AriaTablist(element, {
-    onOpen(...args) {
-      args.unshift(instance);
-      handleOpen.apply(null, args);
-    },
-    ...config
-  });
-  instances.push(instance);
-
-  if (config.equalHeights) {
-    setHeights(element);
+  // Backwards compatibility, `openByUrlHash:true` implies `setUrlHash:true`
+  // to replicate the behavior of the old aria-tablist library.
+  if (config.openByUrlHash) {
+    config.setUrlHash = true;
   }
-  
-  return instance;
-}
 
-/**
- * Opens the a tabpanel if it matches current hash (used in initial init)
- */
-function openByCurrentHash({ options, ariaTablist }) {
-  if (options.openByUrlHash) {
-    const { hash } = window.location;
-    if (hash && hash.length > 1) {
-      const possibleId = hash.substring(1);
-      ariaTablist.tabs.forEach(tab => {
-        if (possibleId === tab.id) {
-          ariaTablist.open(tab);
-        }
-      });
+  // Backwards compatibility, ensure `aria-controls` is present,
+  // generating it from the legacy `aria-labelledby` pattern if needed.
+  const tabs = [...element.children];
+  
+  tabs.forEach((tab) => {
+    if (!tab.hasAttribute('aria-controls')) {
+      // Find the panel using the old association method
+      const panel = document.querySelector(`[aria-labelledby="${tab.id}"]`);
+      if (panel) {
+        ensureId(panel);
+        tab.setAttribute('aria-controls', panel.id);
+      }
     }
-  }
-}
+  });
 
-/**
- * Responsible for setting hash on open if option is set
- */
-function handleOpen({ options }, panel, tab) {
-  if (options.openByUrlHash && window.history) {
-    window.history.replaceState(null, "", `#${ tab.id }`);
-  }
-}
+  const instance = { element, options };
 
-/**
- * Responsible for creating equal height tab panels
- */
-function setHeights(element) {
-  const tabs = [ ...element.children];
-  const panels = tabs.map(n => document.querySelector(`[aria-labelledby="${ n.id }"]`)); 
-  const parent = panels[0].parentElement;
-  const images = [ ...parent.querySelectorAll("img") ];
-  const imagePromises = images.map(image => imagePromise(image));
-  function imagePromise(image) {
-    return new Promise((resolve) => {
-      if (image.complete) {
-        resolve(image);
-      } else {
-        image.onload = resolve;
-        // Errors should also resolve so that height matching continues
-        image.onerror = resolve; 
-      }
-    });
-  }
-  // Run after images are loaded, or if no images it will resolve and run
-  Promise.all(imagePromises).then(() => {
-    const heights = panels.map(panel => {
-      let panelHeight = panel.offsetHeight;
-      if (panel.hidden) {
-        panel.hidden = false;
-        panelHeight = panel.offsetHeight;
-        // This explicity needs "hidden" for aria-tablist (it checks this string value)
-        // Will break the initial window push state when using openWithUrlHash
-        panel.setAttribute("hidden", "hidden"); 
-      }
-      return panelHeight;
-    });
-    const max = Math.max(...heights);
-    panels.forEach(panel => panel.style.minHeight = `${ max }px`);
-  });
+  // Instantiate the new TabManager. It will find its own tabs/panels
+  // and handle all URL hash and equal heights logic internally now
+  instance.tabManager = new TabManager(element, config);
+  instances.push(instance);
+  
+  return instance;
 }

package/lib/scss/_breakpoint.scss

@@ -116,13 +116,13 @@ $sizes: (
 /// @return {Boolean} 
 /// @example scss {compile} Example usage
 ///   .test-exists {
-///     @if(ulu.breakpoint-exists("medium")) {
+///     @if (ulu.breakpoint-exists("medium")) {
 ///       @include ulu.breakpoint-min("medium") {
 ///         padding: 2rem;
 ///       }
 ///     }
 ///     // The below content doesn't print because the size doesn't exist.
-///     @if(ulu.breakpoint-exists("too-large")) {
+///     @if (ulu.breakpoint-exists("too-large")) {
 ///       @include ulu.breakpoint-min("too-large") {
 ///         padding: 20000rem;
 ///       }
@@ -131,7 +131,7 @@ $sizes: (
 
 @function exists($name) {
   $size: map.get($sizes, $name);
-  @return if($size != null, true, false);
+  @return utils.when($size != null, true, false);
 }
 
 /// Create a media query that matches the min-width for a given size

package/lib/scss/_button.scss

@@ -296,15 +296,15 @@ $styles: (
   // If a specific state [hover, active] grab that map
   @if ($state) {
     $state-style: map.get($style, $state);
-    $state-style: if($state-style, $state-style, ());
+    $state-style: utils.when($state-style, $state-style, ());
   }
   // From is the map to grab styles from
-  $from: if($state, $state-style, $style);
+  $from: utils.when($state, $state-style, $style);
   $value: map.get($from, $prop);
 
   // Fallback to parent (if hover)
   @if ($state == "hover") {
-    $value: if($value, $value, map.get($style, $prop)); 
+    $value: utils.when($value, $value, map.get($style, $prop)); 
   }
 
   @if (meta.type-of($value) == "string" and string.index($prop, "color")) {

package/lib/scss/_color.scss

@@ -20,7 +20,7 @@ $palette: (
   "white":                      white,
   "type":                       black,
   "type-secondary":             rgb(82, 82, 82),
-  "type-tertiary":              rgb(125, 125, 125),
+  "type-tertiary":              rgb(110, 110, 110),
   "type-disabled":              rgb(160, 160, 160),
   "headline":                   inherit,
   "background":                 white,
@@ -38,6 +38,7 @@ $palette: (
   "placeholder-background":     #e2e2e2,
   "placeholder-background-alt": #bababa,
   "selected":                   green,
+  "selected-background":        rgb(184, 202, 184),
   "box-shadow":                 rgba(0, 0, 0, 0.349),
   "box-shadow-hover":           rgba(0, 0, 0, 0.5),
   "rule":                       gray,
@@ -133,7 +134,7 @@ $color-classes: (
 
 @function exists($name) {
   $color: map.get($palette, $name);
-  @return if($color != null, true, false);
+  @return utils.when($color != null, true, false);
 }
 
 /// Set color contexts

package/lib/scss/_element.scss

@@ -4,6 +4,7 @@
 
 @use "sass:map";
 @use "sass:meta";
+
 @use "color";
 @use "utils";
 
@@ -175,7 +176,12 @@ $rule-margins: (
 /// @param {String} $name ["default"] name of rule style
 
 @mixin rule-margin($name:  null) {
-  $margin: if($name, get-rule-margin($name), get("margin"));
+  $margin: null;
+  @if ($name) {
+    $margin: get-rule-margin($name);
+  } @else {
+    $margin: get("margin");
+  }
   margin-top: $margin;
   margin-bottom: $margin;
 }
@@ -337,7 +343,7 @@ $rule-margins: (
     "padding-adjust" : null,
   );
   $config: map.merge($defaults, $options);
-  $element: if($before, "::before", "::after");
+  $element: utils.when($before, "::before", "::after");
 
   &#{ $element } {
     content: "";
@@ -362,14 +368,14 @@ $rule-margins: (
   $options: (),
   $before: true
 ) {
-  $element: if($before, "::before", "::after");
+  $element: utils.when($before, "::before", "::after");
   $size: map.get($options, "size");
   $offset: map.get($options, "offset");
   $border-radius: map.get($options, "border-radius");
   $padding-adjust: map.get($options, "padding-adjust");
   
   $end: $side == "top" or $side == "bottom";
-  $position: if($offset, 0 - $offset, null);
+  $position: utils.when($offset, 0 - $offset, null);
 
   @if ($padding-adjust and $size) {
     padding-#{ $side }: calc($padding-adjust + $size);