@graupl/core 1.0.0-beta.14 → 1.0.0-beta.16

package/dist/js/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","names":["isValidInstance","contructor","elements","elementsType","TypeError","key","elementType","name","status","error","isValidType","type","values","valuesType","valueType","isQuerySelector","Error","document","querySelector","isValidClassList","Array","isArray","forEach","value","obj","isValidHoverType","validTypes","includes","join","isTag","tagName","HTMLElement","tag","toLowerCase","check","isValidState","validStates","isValidEvent","validEvents","isValidType","initializeStorage","type","window","Graupl","getStorage","setStorage","data","clearStorage","pushToStorage","key","value","getFromStorage","removeFromStorage","wsRE","attrName","doc","document","attr","element","op","value","attrSelector","id","TypeError","test","RangeError","checkElement","itemToCheck","Element","getElements","selector","context","elements","Document","DocumentFragment","querySelectorAll","Array","prototype","slice","call","filterAndModify","apply","filter","selected","matches","updateAttribute","add","remove","result","trim","split","forEach","item","indexOf","push","attribute","join","once","find","storage","once","generate","options","context","document","navigationSelector","forEach","navigationElement","MenuConstructor","dataset","grauplMenuType","DisclosureMenu","window","undefined","console","warn","menuOptions","grauplMenuOptions","JSON","parse","replace","menuElement","querySelector","controllerElement","containerElement","menu","menuItemSelector","menuLinkSelector","submenuItemSelector","submenuToggleSelector","initializeStorage","pushToStorage","dom","id","generate","document","addEventListener"],"sources":["../../src/js/validate.js","../../src/js/storage.js","../../../../node_modules/@drupal/once/src/once.js","../../src/js/navigation/generator.js","../../src/js/navigation/index.js"],"sourcesContent":["/**\n * Check to see if the provided elements have a specific contructor.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking instanceof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {object}                  contructor - The constructor to check for.\n * @param  {object}                  elements   - The element(s) to check.\n * @return {Object<boolean, string>}            - The result of the check.\n */\nexport function isValidInstance(contructor, elements) {\n  try {\n    if (typeof elements !== \"object\") {\n      const elementsType = typeof elements;\n\n      throw new TypeError(\n        `Elements given to isValidInstance() must be inside of an object. \"${elementsType}\" given.`\n      );\n    }\n\n    for (const key in elements) {\n      if (!(elements[key] instanceof contructor)) {\n        const elementType = typeof elements[key];\n        throw new TypeError(\n          `${key} must be an instance of ${contructor.name}. \"${elementType}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are of a specific type.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking typeof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {string}                  type   - The type to check for.\n * @param  {object}                  values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidType(type, values) {\n  try {\n    if (typeof values !== \"object\") {\n      const valuesType = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidType() must be inside of an object. \"${valuesType}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const valueType = typeof values[key];\n\n      if (valueType !== type) {\n        throw new TypeError(`${key} must be a ${type}. \"${valueType}\" given.`);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided values are valid query selectors.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isQuerySelector(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isQuerySelector() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      try {\n        if (values[key] === null) {\n          throw new Error();\n        }\n\n        document.querySelector(values[key]);\n      } catch {\n        throw new TypeError(\n          `${key} must be a valid query selector. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided value is either a string or an array of strings.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string, string[]>} values - The value(s) to check.\n * @return {Object<boolean, string>}         - The result of the check.\n */\nexport function isValidClassList(values) {\n  try {\n    if (typeof values !== \"object\" || Array.isArray(values)) {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidClassList() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const type = typeof values[key];\n\n      if (type !== \"string\") {\n        if (Array.isArray(values[key])) {\n          values[key].forEach((value) => {\n            if (typeof value !== \"string\") {\n              throw new TypeError(\n                `${key} must be a string or an array of strings. An array containing non-strings given.`\n              );\n            }\n          });\n        } else {\n          throw new TypeError(\n            `${key} must be a string or an array of strings. \"${type}\" given.`\n          );\n        }\n      } else {\n        const obj = {};\n        obj[key] = values[key];\n\n        isQuerySelector(obj);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid hover types.\n *\n * Available types are: `\"off\"`, `\"on\"`, and `\"dynamic\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidHoverType(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidHoverType() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validTypes = [\"off\", \"on\", \"dynamic\"];\n\n    for (const key in values) {\n      if (!validTypes.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validTypes.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided elements are using a specific tag.\n *\n * The elements must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `true` if the check is successful.\n *\n * @param  {string}               tagName - The name of the tag.\n * @param  {Object<HTMLElement>} elements - The element(s) to check.\n * @return {boolean}                      - The result of the check.\n */\nexport function isTag(tagName, elements) {\n  if (\n    isValidType(\"string\", { tagName }).status &&\n    isValidInstance(HTMLElement, elements).status\n  ) {\n    const tag = tagName.toLowerCase();\n    let check = true;\n\n    for (const key in elements) {\n      if (elements[key].tagName.toLowerCase() !== tag) check = false;\n    }\n\n    return check;\n  } else {\n    return false;\n  }\n}\n\n/**\n * Check to see if the provided values are valid focus states for a menu.\n *\n * Available states are: `\"none\"`, `\"self\"`, and `\"child\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidState(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidState() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validStates = [\"none\", \"self\", \"child\"];\n\n    for (const key in values) {\n      if (!validStates.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validStates.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid event types for a menu.\n *\n * Available events are: `\"none\"`, `\"mouse\"`, `\"keyboard\"`, and `\"character\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidEvent(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidEvent() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validEvents = [\"none\", \"mouse\", \"keyboard\", \"character\"];\n\n    for (const key in values) {\n      if (!validEvents.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validEvents.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n","/**\n * @file\n * Provides a system to get and store Graupl data in the browser.\n */\n\nimport { isValidType } from \"./validate.js\";\n\n/**\n * Initializes the storage system.\n *\n * @param {?string} [type = null] - The type of storage to initialize.\n */\nexport function initializeStorage(type = null) {\n  window.Graupl = window.Graupl || {};\n\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = window.Graupl[type] || {};\n  }\n}\n\n/**\n * Get the storage object.\n *\n * @param  {?string} type - The type of storage to get.\n * @return {object}       - The storage object.\n */\nexport function getStorage(type = null) {\n  if (isValidType(\"string\", { type })) {\n    return window.Graupl[type];\n  }\n\n  return window.Graupl;\n}\n\n/**\n * Set the storage object of a given type.\n *\n * @param {string} type - The type of storage to set.\n * @param {object} data - The data to set.\n */\nexport function setStorage(type, data = {}) {\n  if (isValidType(\"string\", { type }) && isValidType(\"object\", { data })) {\n    window.Graupl[type] = data;\n  }\n}\n\n/**\n * Clear the storage object of a given type.\n *\n * @param {string} type - The type of storage to clear.\n */\nexport function clearStorage(type) {\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = {};\n  }\n}\n\n/**\n * Push a value to the storage object.\n *\n * @param {string} type  - The type of storage to push to.\n * @param {string} key   - The key to use for the value.\n * @param {*}      value - The value to store.\n */\nexport function pushToStorage(type, key, value) {\n  if (isValidType(\"string\", { type, key })) {\n    window.Graupl[type][key] = value;\n  }\n}\n\n/**\n * Get a value from the storage object.\n *\n * @param  {string }type - The type of storage to get from.\n * @param  {string }key  - The key to get the value from.\n * @return {*}           - The value from the storage object.\n */\nexport function getFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    return window.Graupl[type][key];\n  }\n\n  return null;\n}\n\n/**\n * Remove a value from the storage object.\n *\n * @param {string} type - The type of storage to remove from.\n * @param {string} key  - The key to remove the value from.\n */\nexport function removeFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    delete window.Graupl[type][key];\n  }\n}\n\nexport default {\n  initializeStorage,\n  getStorage,\n  setStorage,\n  clearStorage,\n  pushToStorage,\n  getFromStorage,\n  removeFromStorage,\n};\n","/**\n * Mark DOM elements as processed to prevent multiple initializations.\n *\n * @module @drupal/once\n *\n * @example <!-- Use as a module -->\n * <script type=\"module\">\n *   import once from 'https://unpkg.com/@drupal/once/src/once.js';\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n *\n * @example <!-- Use as a regular script -->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n * @example <!-- Using a single element as input-->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   // once methods always return an array, to simplify the use with a single\n *   // element use destructuring or the shift method.\n *   const [myElement] = once('my-once-id', document.body);\n *   const myElement = once('my-once-id', document.body).shift();\n * </script>\n */\n\n/**\n * Illegal spaces in ids.\n *\n * @private\n *\n * @type {RegExp}\n */\nconst wsRE = /[\\11\\12\\14\\15\\40]+/;\n\n/**\n * Name of the HTML attribute containing an element's once ids.\n *\n * @private\n *\n * @type {string}\n */\nconst attrName = 'data-once';\n\n/**\n * Shortcut to access the html element.\n *\n * @private\n *\n * @type {HTMLElement}\n */\nconst doc = document;\n\n/**\n * Helper to access element attributes.\n *\n * @private\n *\n * @param {Element} element\n *   The Element to access the data-once attribute from.\n * @param {string} op\n *   The action to take on the element.\n * @param {string} [value]\n *   Optional value for setAttribute.\n *\n * @return {string|undefined|null|boolean}\n *   Result of the attribute method.\n */\nfunction attr(element, op, value) {\n  return element[`${op}Attribute`](attrName, value);\n}\n\n/**\n * Return the attribute selector.\n *\n * @private\n *\n * @param {string} id\n *   The id passed by a call to a once() function.\n *\n * @return {string}\n *   The full CSS attribute selector.\n *\n * @throws {TypeError|RangeError}\n */\nfunction attrSelector(id) {\n  // Verify the validity of the once id.\n  if (typeof id !== 'string') {\n    throw new TypeError('once ID must be a string');\n  }\n  if (id === '' || wsRE.test(id)) {\n    throw new RangeError('once ID must not be empty or contain spaces');\n  }\n  // The id is valid, return the full CSS selector.\n  return `[${attrName}~=\"${id}\"]`;\n}\n\n/**\n * Verifies that an item is an instance of Element.\n *\n * This function is used during filtering to ensure only DOM elements are\n * processed. once() makes use of get/setAttribute, which are methods\n * inherited from the Element object, so only of Element can be used.\n *\n * @private\n *\n * @param {*} itemToCheck\n *   The item to check.\n *\n * @return {boolean}\n *   True if the item is an instance of Element\n *\n * @throws {TypeError}\n */\nfunction checkElement(itemToCheck) {\n  if (!(itemToCheck instanceof Element)) {\n    throw new TypeError('The element must be an instance of Element');\n  }\n  return true;\n}\n\n/**\n * Process arguments, query the DOM if necessary.\n *\n * @private\n *\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array with the processed Id and the list of elements to process.\n */\nfunction getElements(selector, context = doc) {\n  // Assume selector is an array-like value.\n  let elements = selector;\n\n  // If selector is null it is most likely because of a call to querySelector\n  // that didn't return a result.\n  if (selector === null) {\n    elements = [];\n  }\n  // The selector is undefined, error out.\n  else if (!selector) {\n    throw new TypeError('Selector must not be empty');\n  }\n  // Context doesn't implement querySelectorAll, error out.\n  else if (\n    !(\n      context instanceof Document ||\n      context instanceof DocumentFragment ||\n      context instanceof Element\n    )\n  ) {\n    throw new TypeError(\n      'Context must be an object of type \"Document\", \"DocumentFragment\", or \"Element\".',\n    );\n  }\n  // This is a selector, query the elements.\n  else if (typeof selector === 'string') {\n    elements = context.querySelectorAll(selector);\n  }\n  // This is a single element.\n  else if (selector instanceof Element) {\n    elements = [selector];\n  }\n\n  // Make sure an array is returned and not a NodeList or an Array-like object.\n  return Array.prototype.slice.call(elements);\n}\n\n/**\n * A helper for applying DOM changes to a filtered set of elements.\n *\n * This makes it possible to filter items that are not instances of Element,\n * then modify their DOM attributes in a single array traversal.\n *\n * @private\n *\n * @param {string} selector\n *   A CSS selector to check against to each element in the array.\n * @param {Array.<Element>} elements\n *   A NodeList or array of elements passed by a call to a once() function.\n * @param {function} [apply]\n *   An optional function to apply on all matched elements.\n *\n * @return {Array.<Element>}\n *   The array of elements that match the CSS selector.\n */\nfunction filterAndModify(selector, elements, apply) {\n  return elements.filter((element) => {\n    const selected = checkElement(element) && element.matches(selector);\n    if (selected && apply) {\n      apply(element);\n    }\n    return selected;\n  });\n}\n\n/**\n * Add or remove an item from a list of once values.\n *\n * This function removes duplicates while adding or removing a once id in a\n * single array traversal.\n *\n * @private\n *\n * @param {Element} element\n *   A space separated string of once ids from a data-drupal-once attribute.\n * @param {string} [add]\n *   The once id to add to the list of values.\n * @param {string} [remove]\n *   The once id to remove from the list of values.\n *\n * @return {undefined}\n *   Nothing to return this is a callback in a foreach.\n */\nfunction updateAttribute(element, { add, remove }) {\n  const result = [];\n  if (attr(element, 'has')) {\n    attr(element, 'get')\n      .trim()\n      .split(wsRE)\n      .forEach((item) => {\n        if (result.indexOf(item) < 0 && item !== remove) {\n          result.push(item);\n        }\n      });\n  }\n  if (add) {\n    result.push(add);\n  }\n  const attribute = result.join(' ');\n  attr(element, attribute === '' ? 'remove' : 'set', attribute);\n}\n\n/**\n * Ensures a JavaScript callback is only executed once on a set of elements.\n *\n * Filters a NodeList or array of elements, removing those already processed\n * by a callback with a given id.\n * This method adds a `data-once` attribute on DOM elements. The value of\n * this attribute identifies if a given callback has been executed on that\n * element.\n *\n * @global\n *\n * @example <caption>Basic usage</caption>\n * const elements = once('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once('my-once-id', document.querySelector('#some-id'));\n * @example <caption>Using a single element</caption>\n * // Once always returns an array, even when passing a single element. Some\n * // forms that can be used to keep code readable.\n * // Destructuring:\n * const [myElement] = once('my-once-id', document.body);\n * // By changing the resulting array, es5 compatible.\n * const myElement = once('my-once-id', document.body).shift();\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array of elements that have not yet been processed by a once call\n *   with a given id.\n */\nfunction once(id, selector, context) {\n  return filterAndModify(\n    `:not(${attrSelector(id)})`,\n    getElements(selector, context),\n    (element) => updateAttribute(element, { add: id }),\n  );\n}\n\n/**\n * Removes a once id from an element's data-drupal-once attribute value.\n *\n * If a once id is removed from an element's data-drupal-once attribute value,\n * the JavaScript callback associated with that id can be executed on that\n * element again.\n *\n * @method once.remove\n *\n * @example <caption>Basic usage</caption>\n * const elements = once.remove('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.remove('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.remove('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.remove('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.remove('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.remove('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of a once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that had been processed by the provided id,\n *   and are now able to be processed again.\n */\nonce.remove = (id, selector, context) => {\n  return filterAndModify(\n    attrSelector(id),\n    getElements(selector, context),\n    (element) => updateAttribute(element, { remove: id }),\n  );\n};\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Behaves like {@link once} and {@link once.remove} without changing the DOM.\n * To select all DOM nodes processed by a given id, use {@link once.find}.\n *\n * @method once.filter\n *\n * @example <caption>Basic usage</caption>\n * const filteredElements = once.filter('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.filter('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.filter('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.filter('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.filter('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.filter('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.filter = (id, selector, context) =>\n  filterAndModify(attrSelector(id), getElements(selector, context));\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Query the 'context' element for elements that already have the\n * corresponding once id value.\n *\n * @method once.find\n *\n * @example <caption>Basic usage</caption>\n * const oncedElements = once.find('my-once-id');\n * @example <caption>Input parameters accepted</caption>\n * // Call without parameters, return all elements with a `data-once` attribute.\n * once.find();\n * // Call without a context.\n * once.find('my-once-id');\n * // Call with a context.\n * once.find('my-once-id', document.head);\n *\n * @param {string} [id]\n *   The id of the once call.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   Scope of the search for matching elements.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.find = (id, context) =>\n  getElements(!id ? `[${attrName}]` : attrSelector(id), context);\n\nexport default once;\n","import storage from \"../storage.js\";\nimport once from \"@drupal/once\";\n\nconst generate = (\n  options = {},\n  context = document,\n  navigationSelector = \".navigation\"\n) => {\n  once(\"graupl-navigation-generator\", navigationSelector, context).forEach(\n    (navigationElement) => {\n      const MenuConstructor =\n        navigationElement.dataset.grauplMenuType || DisclosureMenu;\n\n      if (window[MenuConstructor] === undefined) {\n        console.warn(\n          `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`\n        );\n\n        return;\n      }\n\n      const menuOptions = navigationElement.dataset.grauplMenuOptions\n        ? JSON.parse(\n            navigationElement.dataset.grauplMenuOptions.replace(/'/g, '\"')\n          ) || {}\n        : {};\n      const menuElement = navigationElement.querySelector(\".menu\");\n      const controllerElement =\n        navigationElement.querySelector(\".navigation-toggle\") || null;\n      const containerElement = controllerElement ? navigationElement : null;\n      const menu = new window[MenuConstructor]({\n        menuElement,\n        menuItemSelector: \".menu-item\",\n        menuLinkSelector: \".menu-link\",\n        submenuItemSelector: \".submenu-item\",\n        submenuToggleSelector: \".submenu-toggle\",\n        controllerElement,\n        containerElement,\n        ...options,\n        ...menuOptions,\n      });\n\n      storage.initializeStorage(\"menus\");\n      storage.pushToStorage(\"menus\", menu.dom.menu.id, menu);\n    }\n  );\n};\n\nexport default generate;\n","import generate from \"./generator.js\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  generate();\n});\n"],"x_google_ignoreList":[2],"mappings":"YA6DA,SAAgBuC,EAAYE,EAAM7B,EAAQ,CACxC,GAAI,CACF,GAAA,OAAWA,GAAW,SAAU,CAC9B,MAAMC,EAAAA,OAAoBD,EAE1B,MAAM,IAAImD,UAAAA,+DACuDlD,CAAAA,UAAU,CAE7E,CAEA,UAAWoC,KAAOrC,EAAQ,CACxB,MAAME,EAAAA,OAAmBF,EAAOqC,CAAAA,EAEhC,GAAInC,IAAc2B,EAChB,MAAM,IAAIsB,UAAAA,GAAad,CAAAA,cAAiBR,CAAAA,MAAU3B,CAAAA,UAAS,CAE/D,CAEA,MAAO,CACLN,OAAQ,GACRC,MAAO,IACR,CACF,OAAQA,EAAO,CACd,MAAO,CACLD,OAAQ,GACRC,MAAAA,CACD,CACH,CACF,CC7EA,SAAgByH,EAAkBzF,EAAO,KAAM,CAC7CuE,OAAOrE,OAASqE,OAAOrE,QAAU,CAAE,EAE/BJ,EAAY,SAAU,CAAEE,KAAAA,CAAM,CAAA,IAChCuE,OAAOrE,OAAOF,CAAAA,EAAQuE,OAAOrE,OAAOF,CAAAA,GAAS,CAAE,EAEnD,CAQA,SAAgBG,EAAWH,EAAO,KAAM,CACtC,OAAIF,EAAY,SAAU,CAAEE,KAAAA,CAAM,CAAA,EACzBuE,OAAOrE,OAAOF,CAAAA,EAGhBuE,OAAOrE,MAChB,CAQA,SAAgBE,EAAWJ,EAAMK,EAAO,CAAE,EAAE,CACtCP,EAAY,SAAU,CAAEE,KAAAA,CAAM,CAAA,GAAKF,EAAY,SAAU,CAAEO,KAAAA,CAAM,CAAA,IACnEkE,OAAOrE,OAAOF,CAAAA,EAAQK,EAE1B,CAOA,SAAgBC,EAAaN,EAAM,CAC7BF,EAAY,SAAU,CAAEE,KAAAA,CAAM,CAAA,IAChCuE,OAAOrE,OAAOF,CAAAA,EAAQ,CAAE,EAE5B,CASA,SAAgB0F,EAAc1F,EAAMQ,EAAKW,EAAO,CAC1CrB,EAAY,SAAU,CAAEE,KAAAA,EAAMQ,IAAAA,CAAK,CAAA,IACrC+D,OAAOrE,OAAOF,CAAAA,EAAMQ,CAAAA,EAAOW,EAE/B,CASA,SAAgBT,EAAeV,EAAMQ,EAAK,CACxC,OAAIV,EAAY,SAAU,CAAEE,KAAAA,EAAMQ,IAAAA,CAAK,CAAA,EAC9B+D,OAAOrE,OAAOF,CAAAA,EAAMQ,CAAAA,EAGtB,IACT,CAQA,SAAgBG,EAAkBX,EAAMQ,EAAK,CACvCV,EAAY,SAAU,CAAEE,KAAAA,EAAMQ,IAAAA,CAAK,CAAA,GACrC,OAAO+D,OAAOrE,OAAOF,CAAAA,EAAMQ,CAAAA,CAE/B,CAEA,IAAA,EAAe,CACbiF,kBAAAA,EACAtF,WAAAA,EACAC,WAAAA,EACAE,aAAAA,EACAoF,cAAAA,EACAhF,eAAAA,EACAC,kBAAAA,CACD,ECpED,MAAMC,EAAO,qBASPC,EAAW,YASXC,EAAMgF,SAiBZ,SAAS9E,EAAKC,EAASC,EAAIC,EAAO,CAChC,OAAOF,EAAAA,GAAWC,CAAAA,WAAE,EAAaL,EAAUM,CAAAA,CAC7C,CAeA,SAASC,EAAawE,EAAI,CAExB,GAAA,OAAWA,GAAO,SAChB,MAAM,IAAItE,UAAU,0BAAA,EAEtB,GAAIsE,IAAO,IAAMhF,EAAKW,KAAKqE,CAAAA,EACzB,MAAM,IAAIpE,WAAW,6CAAA,EAGvB,MAAA,IAAWX,CAAAA,MAAc+E,CAAAA,IAC3B,CAmBA,SAASnE,EAAaC,EAAa,CACjC,GAAA,EAAMA,aAAuBC,SAC3B,MAAM,IAAIL,UAAU,4CAAA,EAEtB,MAAO,EACT,CAeA,SAASM,EAAYC,EAAUiC,EAAUhD,EAAK,CAE5C,IAAIiB,EAAWF,EAIf,GAAIA,IAAa,KACfE,EAAW,CAAE,UAGLF,KAMNiC,aAAmB9B,UACnB8B,aAAmB7B,kBACnB6B,aAAmBnC,eAQPE,GAAa,SAC3BE,EAAW+B,EAAQ5B,iBAAiBL,CAAAA,EAG7BA,aAAoBF,UAC3BI,EAAW,CAACF,CAAS,OAVrB,OAAM,IAAIP,UACR,iFAAA,MAXF,OAAM,IAAIA,UAAU,4BAAA,EAwBtB,OAAOa,MAAMC,UAAUC,MAAMC,KAAKP,CAAAA,CACpC,CAoBA,SAASQ,EAAgBV,EAAUE,EAAUS,EAAO,CAClD,OAAOT,EAASU,OAAQxB,GAAY,CAClC,MAAMyB,EAAWjB,EAAaR,CAAAA,GAAYA,EAAQ0B,QAAQd,CAAAA,EAC1D,OAAIa,GAAYF,GACdA,EAAMvB,CAAAA,EAEDyB,CACR,CAAA,CACH,CAoBA,SAASE,EAAgB3B,EAAS,CAAE4B,IAAAA,EAAKC,OAAAA,CAAAA,EAAU,CACjD,MAAMC,EAAS,CAAE,EACb/B,EAAKC,EAAS,KAAA,GAChBD,EAAKC,EAAS,KAAA,EACX+B,KAAAA,EACAC,MAAMrC,CAAAA,EACNqD,QAASd,GAAS,CACbJ,EAAOK,QAAQD,CAAAA,EAAQ,GAAKA,IAASL,GACvCC,EAAOM,KAAKF,CAAAA,CAEf,CAAA,EAEDN,GACFE,EAAOM,KAAKR,CAAAA,EAEd,MAAMS,EAAYP,EAAOQ,KAAK,GAAA,EAC9BvC,EAAKC,EAASqC,IAAc,GAAK,SAAW,MAAOA,CAAAA,CACrD,CA6CA,SAASK,EAAKiC,EAAI/D,EAAUiC,EAAS,CACnC,OAAOvB,EAAAA,QACGnB,EAAawE,CAAAA,CAAG,IACxBhE,EAAYC,EAAUiC,CAAAA,EACrB7C,GAAY2B,EAAgB3B,EAAS,CAAE4B,IAAK+C,CAAI,CAAA,CACnD,CACF,CAoCAjC,EAAKb,OAAS,CAAC8C,EAAI/D,EAAUiC,IACpBvB,EACLnB,EAAawE,CAAAA,EACbhE,EAAYC,EAAUiC,CAAAA,EACrB7C,GAAY2B,EAAgB3B,EAAS,CAAE6B,OAAQ8C,CAAI,CAAA,CACtD,EAoCFjC,EAAKlB,OAAS,CAACmD,EAAI/D,EAAUiC,IAC3BvB,EAAgBnB,EAAawE,CAAAA,EAAKhE,EAAYC,EAAUiC,CAAAA,CAAQ,EA6BlEH,EAAKF,KAAO,CAACmC,EAAI9B,IACflC,EAAagE,EAAuBxE,EAAawE,CAAAA,EAApCA,IAAS/E,CAAAA,IAAgCiD,CAAAA,EAExD,IAAA,EAAeH,EChWf,EA7CiBkC,CACfhC,EAAU,CAAE,EACZC,EAAUgC,SACV9B,EAAqB,gBAClB,CACHL,EAAK,8BAA+BK,EAAoBF,CAAAA,EAASG,QAC9DC,GAAsB,CACrB,MAAMC,EACJD,EAAkBE,QAAQC,gBAAkBC,eAE9C,GAAIC,OAAOJ,CAAAA,IAAAA,OAAgC,CACzCM,QAAQC,KAAAA,gDAC0CP,CAAAA,gDAAe,EAGjE,MACF,CAEA,MAAMQ,EAAcT,EAAkBE,QAAQQ,kBAC1CC,KAAKC,MACHZ,EAAkBE,QAAQQ,kBAAkBG,QAAQ,KAAM,GAAA,CAC5D,GAAK,CAAE,EACP,CAAE,EACAC,EAAcd,EAAkBe,cAAc,OAAA,EAC9CC,EACJhB,EAAkBe,cAAc,oBAAA,GAAyB,KACrDE,EAAmBD,EAAoBhB,EAAoB,KAC3DkB,EAAO,IAAIb,OAAOJ,CAAAA,EAAiB,CACvCa,YAAAA,EACAK,iBAAkB,aAClBC,iBAAkB,aAClBC,oBAAqB,gBACrBC,sBAAuB,kBACvBN,kBAAAA,EACAC,iBAAAA,EACA,GAAGtB,EACH,GAAGc,CACJ,CAAA,EAEDjB,EAAQ+B,kBAAkB,OAAA,EAC1B/B,EAAQgC,cAAc,QAASN,EAAKO,IAAIP,KAAKQ,GAAIR,CAAAA,CAErD,CAAA,CACD,EC5CDU,SAASC,iBAAiB,mBAAoB,UAAY,CACxDF,EAAAA,CACD,CAAA"}
+{"version":3,"file":"navigation.js","names":["isValidInstance","contructor","elements","elementsType","TypeError","key","elementType","name","status","error","isValidType","type","values","valuesType","valueType","isQuerySelector","Error","document","querySelector","isValidClassList","Array","isArray","forEach","value","obj","isValidHoverType","validTypes","includes","join","isTag","tagName","HTMLElement","tag","toLowerCase","check","isValidState","validStates","isValidEvent","validEvents","isValidType","initializeStorage","type","window","Graupl","getStorage","setStorage","data","clearStorage","pushToStorage","key","value","getFromStorage","removeFromStorage","wsRE","attrName","doc","document","attr","element","op","value","attrSelector","id","TypeError","test","RangeError","checkElement","itemToCheck","Element","getElements","selector","context","elements","Document","DocumentFragment","querySelectorAll","Array","prototype","slice","call","filterAndModify","apply","filter","selected","matches","updateAttribute","add","remove","result","trim","split","forEach","item","indexOf","push","attribute","join","once","find","storage","once","generate","options","context","document","navigationSelector","forEach","navigationElement","MenuConstructor","dataset","grauplMenuType","DisclosureMenu","window","undefined","console","warn","menuOptions","grauplMenuOptions","JSON","parse","replace","menuElement","querySelector","controllerElement","containerElement","menu","menuItemSelector","menuLinkSelector","submenuItemSelector","submenuToggleSelector","initializeStorage","pushToStorage","dom","id","generate","document","addEventListener"],"sources":["../../src/js/validate.js","../../src/js/storage.js","../../../../node_modules/@drupal/once/src/once.js","../../src/js/navigation/generator.js","../../src/js/navigation/index.js"],"sourcesContent":["/**\n * Check to see if the provided elements have a specific contructor.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking instanceof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {object}                  contructor - The constructor to check for.\n * @param  {object}                  elements   - The element(s) to check.\n * @return {Object<boolean, string>}            - The result of the check.\n */\nexport function isValidInstance(contructor, elements) {\n  try {\n    if (typeof elements !== \"object\") {\n      const elementsType = typeof elements;\n\n      throw new TypeError(\n        `Elements given to isValidInstance() must be inside of an object. \"${elementsType}\" given.`\n      );\n    }\n\n    for (const key in elements) {\n      if (!(elements[key] instanceof contructor)) {\n        const elementType = typeof elements[key];\n        throw new TypeError(\n          `${key} must be an instance of ${contructor.name}. \"${elementType}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are of a specific type.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * This is essentially just a wrapper function around checking typeof with\n * more descriptive error message to help debugging.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {string}                  type   - The type to check for.\n * @param  {object}                  values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidType(type, values) {\n  try {\n    if (typeof values !== \"object\") {\n      const valuesType = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidType() must be inside of an object. \"${valuesType}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const valueType = typeof values[key];\n\n      if (valueType !== type) {\n        throw new TypeError(`${key} must be a ${type}. \"${valueType}\" given.`);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided values are valid query selectors.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isQuerySelector(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isQuerySelector() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      try {\n        if (values[key] === null) {\n          throw new Error();\n        }\n\n        document.querySelector(values[key]);\n      } catch {\n        throw new TypeError(\n          `${key} must be a valid query selector. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided value is either a string or an array of strings.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string, string[]>} values - The value(s) to check.\n * @return {Object<boolean, string>}         - The result of the check.\n */\nexport function isValidClassList(values) {\n  try {\n    if (typeof values !== \"object\" || Array.isArray(values)) {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidClassList() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    for (const key in values) {\n      const type = typeof values[key];\n\n      if (type !== \"string\") {\n        if (Array.isArray(values[key])) {\n          values[key].forEach((value) => {\n            if (typeof value !== \"string\") {\n              throw new TypeError(\n                `${key} must be a string or an array of strings. An array containing non-strings given.`\n              );\n            }\n          });\n        } else {\n          throw new TypeError(\n            `${key} must be a string or an array of strings. \"${type}\" given.`\n          );\n        }\n      } else {\n        const obj = {};\n        obj[key] = values[key];\n\n        isQuerySelector(obj);\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid hover types.\n *\n * Available types are: `\"off\"`, `\"on\"`, and `\"dynamic\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidHoverType(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidHoverType() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validTypes = [\"off\", \"on\", \"dynamic\"];\n\n    for (const key in values) {\n      if (!validTypes.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validTypes.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Checks to see if the provided elements are using a specific tag.\n *\n * The elements must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `true` if the check is successful.\n *\n * @param  {string}               tagName - The name of the tag.\n * @param  {Object<HTMLElement>} elements - The element(s) to check.\n * @return {boolean}                      - The result of the check.\n */\nexport function isTag(tagName, elements) {\n  if (\n    isValidType(\"string\", { tagName }).status &&\n    isValidInstance(HTMLElement, elements).status\n  ) {\n    const tag = tagName.toLowerCase();\n    let check = true;\n\n    for (const key in elements) {\n      if (elements[key].tagName.toLowerCase() !== tag) check = false;\n    }\n\n    return check;\n  } else {\n    return false;\n  }\n}\n\n/**\n * Check to see if the provided values are valid focus states for a menu.\n *\n * Available states are: `\"none\"`, `\"self\"`, and `\"child\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidState(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidState() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validStates = [\"none\", \"self\", \"child\"];\n\n    for (const key in values) {\n      if (!validStates.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validStates.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n\n/**\n * Check to see if the provided values are valid event types for a menu.\n *\n * Available events are: `\"none\"`, `\"mouse\"`, `\"keyboard\"`, and `\"character\"`.\n *\n * The values must be provided inside of an object\n * so the variable name can be retrieved in case of errors.\n *\n * Will return `{ status: true }` if the check is successful.\n *\n * @param  {Object<string>}          values - The value(s) to check.\n * @return {Object<boolean, string>}        - The result of the check.\n */\nexport function isValidEvent(values) {\n  try {\n    if (typeof values !== \"object\") {\n      const type = typeof values;\n\n      throw new TypeError(\n        `Values given to isValidEvent() must be inside of an object. \"${type}\" given.`\n      );\n    }\n\n    const validEvents = [\"none\", \"mouse\", \"keyboard\", \"character\"];\n\n    for (const key in values) {\n      if (!validEvents.includes(values[key])) {\n        throw new TypeError(\n          `${key} must be one of the following values: ${validEvents.join(\n            \", \"\n          )}. \"${values[key]}\" given.`\n        );\n      }\n    }\n\n    return {\n      status: true,\n      error: null,\n    };\n  } catch (error) {\n    return {\n      status: false,\n      error,\n    };\n  }\n}\n","/**\n * @file\n * Provides a system to get and store Graupl data in the browser.\n */\n\nimport { isValidType } from \"./validate.js\";\n\n/**\n * Initializes the storage system.\n *\n * @param {?string} [type = null] - The type of storage to initialize.\n */\nexport function initializeStorage(type = null) {\n  window.Graupl = window.Graupl || {};\n\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = window.Graupl[type] || {};\n  }\n}\n\n/**\n * Get the storage object.\n *\n * @param  {?string} type - The type of storage to get.\n * @return {object}       - The storage object.\n */\nexport function getStorage(type = null) {\n  if (isValidType(\"string\", { type })) {\n    return window.Graupl[type];\n  }\n\n  return window.Graupl;\n}\n\n/**\n * Set the storage object of a given type.\n *\n * @param {string} type - The type of storage to set.\n * @param {object} data - The data to set.\n */\nexport function setStorage(type, data = {}) {\n  if (isValidType(\"string\", { type }) && isValidType(\"object\", { data })) {\n    window.Graupl[type] = data;\n  }\n}\n\n/**\n * Clear the storage object of a given type.\n *\n * @param {string} type - The type of storage to clear.\n */\nexport function clearStorage(type) {\n  if (isValidType(\"string\", { type })) {\n    window.Graupl[type] = {};\n  }\n}\n\n/**\n * Push a value to the storage object.\n *\n * @param {string} type  - The type of storage to push to.\n * @param {string} key   - The key to use for the value.\n * @param {*}      value - The value to store.\n */\nexport function pushToStorage(type, key, value) {\n  if (isValidType(\"string\", { type, key })) {\n    window.Graupl[type][key] = value;\n  }\n}\n\n/**\n * Get a value from the storage object.\n *\n * @param  {string }type - The type of storage to get from.\n * @param  {string }key  - The key to get the value from.\n * @return {*}           - The value from the storage object.\n */\nexport function getFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    return window.Graupl[type][key];\n  }\n\n  return null;\n}\n\n/**\n * Remove a value from the storage object.\n *\n * @param {string} type - The type of storage to remove from.\n * @param {string} key  - The key to remove the value from.\n */\nexport function removeFromStorage(type, key) {\n  if (isValidType(\"string\", { type, key })) {\n    delete window.Graupl[type][key];\n  }\n}\n\nexport default {\n  initializeStorage,\n  getStorage,\n  setStorage,\n  clearStorage,\n  pushToStorage,\n  getFromStorage,\n  removeFromStorage,\n};\n","/**\n * Mark DOM elements as processed to prevent multiple initializations.\n *\n * @module @drupal/once\n *\n * @example <!-- Use as a module -->\n * <script type=\"module\">\n *   import once from 'https://unpkg.com/@drupal/once/src/once.js';\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n *\n * @example <!-- Use as a regular script -->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   const elements = once('my-once-id', 'div');\n *   // Initialize elements.\n *   elements.forEach(el => el.innerHTML = 'processed');\n * </script>\n * @example <!-- Using a single element as input-->\n * <script src=\"https://unpkg.com/@drupal/once\"></script>\n * <script>\n *   // once methods always return an array, to simplify the use with a single\n *   // element use destructuring or the shift method.\n *   const [myElement] = once('my-once-id', document.body);\n *   const myElement = once('my-once-id', document.body).shift();\n * </script>\n */\n\n/**\n * Illegal spaces in ids.\n *\n * @private\n *\n * @type {RegExp}\n */\nconst wsRE = /[\\11\\12\\14\\15\\40]+/;\n\n/**\n * Name of the HTML attribute containing an element's once ids.\n *\n * @private\n *\n * @type {string}\n */\nconst attrName = 'data-once';\n\n/**\n * Shortcut to access the html element.\n *\n * @private\n *\n * @type {HTMLElement}\n */\nconst doc = document;\n\n/**\n * Helper to access element attributes.\n *\n * @private\n *\n * @param {Element} element\n *   The Element to access the data-once attribute from.\n * @param {string} op\n *   The action to take on the element.\n * @param {string} [value]\n *   Optional value for setAttribute.\n *\n * @return {string|undefined|null|boolean}\n *   Result of the attribute method.\n */\nfunction attr(element, op, value) {\n  return element[`${op}Attribute`](attrName, value);\n}\n\n/**\n * Return the attribute selector.\n *\n * @private\n *\n * @param {string} id\n *   The id passed by a call to a once() function.\n *\n * @return {string}\n *   The full CSS attribute selector.\n *\n * @throws {TypeError|RangeError}\n */\nfunction attrSelector(id) {\n  // Verify the validity of the once id.\n  if (typeof id !== 'string') {\n    throw new TypeError('once ID must be a string');\n  }\n  if (id === '' || wsRE.test(id)) {\n    throw new RangeError('once ID must not be empty or contain spaces');\n  }\n  // The id is valid, return the full CSS selector.\n  return `[${attrName}~=\"${id}\"]`;\n}\n\n/**\n * Verifies that an item is an instance of Element.\n *\n * This function is used during filtering to ensure only DOM elements are\n * processed. once() makes use of get/setAttribute, which are methods\n * inherited from the Element object, so only of Element can be used.\n *\n * @private\n *\n * @param {*} itemToCheck\n *   The item to check.\n *\n * @return {boolean}\n *   True if the item is an instance of Element\n *\n * @throws {TypeError}\n */\nfunction checkElement(itemToCheck) {\n  if (!(itemToCheck instanceof Element)) {\n    throw new TypeError('The element must be an instance of Element');\n  }\n  return true;\n}\n\n/**\n * Process arguments, query the DOM if necessary.\n *\n * @private\n *\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array with the processed Id and the list of elements to process.\n */\nfunction getElements(selector, context = doc) {\n  // Assume selector is an array-like value.\n  let elements = selector;\n\n  // If selector is null it is most likely because of a call to querySelector\n  // that didn't return a result.\n  if (selector === null) {\n    elements = [];\n  }\n  // The selector is undefined, error out.\n  else if (!selector) {\n    throw new TypeError('Selector must not be empty');\n  }\n  // Context doesn't implement querySelectorAll, error out.\n  else if (\n    !(\n      context instanceof Document ||\n      context instanceof DocumentFragment ||\n      context instanceof Element\n    )\n  ) {\n    throw new TypeError(\n      'Context must be an object of type \"Document\", \"DocumentFragment\", or \"Element\".',\n    );\n  }\n  // This is a selector, query the elements.\n  else if (typeof selector === 'string') {\n    elements = context.querySelectorAll(selector);\n  }\n  // This is a single element.\n  else if (selector instanceof Element) {\n    elements = [selector];\n  }\n\n  // Make sure an array is returned and not a NodeList or an Array-like object.\n  return Array.prototype.slice.call(elements);\n}\n\n/**\n * A helper for applying DOM changes to a filtered set of elements.\n *\n * This makes it possible to filter items that are not instances of Element,\n * then modify their DOM attributes in a single array traversal.\n *\n * @private\n *\n * @param {string} selector\n *   A CSS selector to check against to each element in the array.\n * @param {Array.<Element>} elements\n *   A NodeList or array of elements passed by a call to a once() function.\n * @param {function} [apply]\n *   An optional function to apply on all matched elements.\n *\n * @return {Array.<Element>}\n *   The array of elements that match the CSS selector.\n */\nfunction filterAndModify(selector, elements, apply) {\n  return elements.filter((element) => {\n    const selected = checkElement(element) && element.matches(selector);\n    if (selected && apply) {\n      apply(element);\n    }\n    return selected;\n  });\n}\n\n/**\n * Add or remove an item from a list of once values.\n *\n * This function removes duplicates while adding or removing a once id in a\n * single array traversal.\n *\n * @private\n *\n * @param {Element} element\n *   A space separated string of once ids from a data-drupal-once attribute.\n * @param {string} [add]\n *   The once id to add to the list of values.\n * @param {string} [remove]\n *   The once id to remove from the list of values.\n *\n * @return {undefined}\n *   Nothing to return this is a callback in a foreach.\n */\nfunction updateAttribute(element, { add, remove }) {\n  const result = [];\n  if (attr(element, 'has')) {\n    attr(element, 'get')\n      .trim()\n      .split(wsRE)\n      .forEach((item) => {\n        if (result.indexOf(item) < 0 && item !== remove) {\n          result.push(item);\n        }\n      });\n  }\n  if (add) {\n    result.push(add);\n  }\n  const attribute = result.join(' ');\n  attr(element, attribute === '' ? 'remove' : 'set', attribute);\n}\n\n/**\n * Ensures a JavaScript callback is only executed once on a set of elements.\n *\n * Filters a NodeList or array of elements, removing those already processed\n * by a callback with a given id.\n * This method adds a `data-once` attribute on DOM elements. The value of\n * this attribute identifies if a given callback has been executed on that\n * element.\n *\n * @global\n *\n * @example <caption>Basic usage</caption>\n * const elements = once('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once('my-once-id', document.querySelector('#some-id'));\n * @example <caption>Using a single element</caption>\n * // Once always returns an array, even when passing a single element. Some\n * // forms that can be used to keep code readable.\n * // Destructuring:\n * const [myElement] = once('my-once-id', document.body);\n * // By changing the resulting array, es5 compatible.\n * const myElement = once('my-once-id', document.body).shift();\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   An element or document object to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   An array of elements that have not yet been processed by a once call\n *   with a given id.\n */\nfunction once(id, selector, context) {\n  return filterAndModify(\n    `:not(${attrSelector(id)})`,\n    getElements(selector, context),\n    (element) => updateAttribute(element, { add: id }),\n  );\n}\n\n/**\n * Removes a once id from an element's data-drupal-once attribute value.\n *\n * If a once id is removed from an element's data-drupal-once attribute value,\n * the JavaScript callback associated with that id can be executed on that\n * element again.\n *\n * @method once.remove\n *\n * @example <caption>Basic usage</caption>\n * const elements = once.remove('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.remove('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.remove('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.remove('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.remove('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.remove('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of a once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that had been processed by the provided id,\n *   and are now able to be processed again.\n */\nonce.remove = (id, selector, context) => {\n  return filterAndModify(\n    attrSelector(id),\n    getElements(selector, context),\n    (element) => updateAttribute(element, { remove: id }),\n  );\n};\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Behaves like {@link once} and {@link once.remove} without changing the DOM.\n * To select all DOM nodes processed by a given id, use {@link once.find}.\n *\n * @method once.filter\n *\n * @example <caption>Basic usage</caption>\n * const filteredElements = once.filter('my-once-id', '[data-myelement]');\n * @example <caption>Input parameters accepted</caption>\n * // NodeList.\n * once.filter('my-once-id', document.querySelectorAll('[data-myelement]'));\n * // Array or Array-like of Element.\n * once.filter('my-once-id', jQuery('[data-myelement]'));\n * // A CSS selector without a context.\n * once.filter('my-once-id', '[data-myelement]');\n * // A CSS selector with a context.\n * once.filter('my-once-id', '[data-myelement]', document.head);\n * // Single Element.\n * once.filter('my-once-id', document.querySelector('#some-id'));\n *\n * @param {string} id\n *   The id of the once call.\n * @param {NodeList|Array.<Element>|Element|string} selector\n *   A NodeList or array of elements to remove the once id from.\n * @param {Document|Element} [context=document]\n *   An element to use as context for querySelectorAll.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.filter = (id, selector, context) =>\n  filterAndModify(attrSelector(id), getElements(selector, context));\n\n/**\n * Finds elements that have been processed by a given once id.\n *\n * Query the 'context' element for elements that already have the\n * corresponding once id value.\n *\n * @method once.find\n *\n * @example <caption>Basic usage</caption>\n * const oncedElements = once.find('my-once-id');\n * @example <caption>Input parameters accepted</caption>\n * // Call without parameters, return all elements with a `data-once` attribute.\n * once.find();\n * // Call without a context.\n * once.find('my-once-id');\n * // Call with a context.\n * once.find('my-once-id', document.head);\n *\n * @param {string} [id]\n *   The id of the once call.\n * @param {Document|DocumentFragment|Element} [context=document]\n *   Scope of the search for matching elements.\n *\n * @return {Array.<Element>}\n *   A filtered array of elements that have already been processed by the\n *   provided once id.\n */\nonce.find = (id, context) =>\n  getElements(!id ? `[${attrName}]` : attrSelector(id), context);\n\nexport default once;\n","import storage from \"../storage.js\";\nimport once from \"@drupal/once\";\n\nconst generate = (\n  options = {},\n  context = document,\n  navigationSelector = \".navigation\"\n) => {\n  once(\"graupl-navigation-generator\", navigationSelector, context).forEach(\n    (navigationElement) => {\n      const MenuConstructor =\n        navigationElement.dataset.grauplMenuType || DisclosureMenu;\n\n      if (window[MenuConstructor] === undefined) {\n        console.warn(\n          `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`\n        );\n\n        return;\n      }\n\n      const menuOptions = navigationElement.dataset.grauplMenuOptions\n        ? JSON.parse(\n            navigationElement.dataset.grauplMenuOptions.replace(/'/g, '\"')\n          ) || {}\n        : {};\n      const menuElement = navigationElement.querySelector(\".menu\");\n      const controllerElement =\n        navigationElement.querySelector(\".navigation-toggle\") || null;\n      const containerElement = controllerElement ? navigationElement : null;\n      const menu = new window[MenuConstructor]({\n        menuElement,\n        menuItemSelector: \".menu-item\",\n        menuLinkSelector: \".menu-link\",\n        submenuItemSelector: \".submenu-item\",\n        submenuToggleSelector: \".submenu-toggle\",\n        controllerElement,\n        containerElement,\n        ...options,\n        ...menuOptions,\n      });\n\n      storage.initializeStorage(\"menus\");\n      storage.pushToStorage(\"menus\", menu.dom.menu.id, menu);\n    }\n  );\n};\n\nexport default generate;\n","import generate from \"./generator.js\";\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  generate();\n});\n"],"x_google_ignoreList":[2],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",

package/src/js/domHelpers.js

@@ -40,8 +40,7 @@ export function removeClass(className, element) {
  * Select all focusable elements within a given context.
  *
  * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- *
- * @returns {HTMLElement[]}
+ * @return {HTMLElement[]} - An array of focusable elements.
  */
 export function selectAllFocusableElements(context = document) {
   const querySelector =
@@ -63,8 +62,7 @@ export function selectAllFocusableElements(context = document) {
  * Select the first focusable element within a given context.
  *
  * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- *
- * @returns {HTMLElement|boolean} - The first focusable element or false if none found.
+ * @return {HTMLElement|boolean} - The first focusable element or false if none found.
  */
 export function selectFirstFocusableElement(context = document) {
   const tabbableElements = selectAllFocusableElements(context);
@@ -76,8 +74,7 @@ export function selectFirstFocusableElement(context = document) {
  * Select the last focusable element within a given context.
  *
  * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- *
- * @returns {HTMLElement|boolean} - The last focusable element or false if none found.
+ * @return {HTMLElement|boolean} - The last focusable element or false if none found.
  */
 export function selectLastFocusableElement(context = document) {
   const tabbableElements = selectAllFocusableElements(context);
@@ -90,8 +87,7 @@ export function selectLastFocusableElement(context = document) {
  *
  * @param {HTMLElement} element - The reference element.
  * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- *
- * @returns {HTMLElement|boolean} - The next focusable element or false if none found.
+ * @return {HTMLElement|boolean} - The next focusable element or false if none found.
  */
 export function selectNextFocusableElement(element, context = document) {
   const tabbableElements = selectAllFocusableElements(context);
@@ -107,8 +103,7 @@ export function selectNextFocusableElement(element, context = document) {
  *
  * @param {HTMLElement} element - The reference element.
  * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- *
- * @returns {HTMLElement|boolean} - The previous focusable element or false if none found.
+ * @return {HTMLElement|boolean} - The previous focusable element or false if none found.
  */
 export function selectPreviousFocusableElement(element, context = document) {
   const tabbableElements = selectAllFocusableElements(context);

package/src/scss/_defaults.scss

@@ -6,6 +6,7 @@
 // They should not be used to define direct property values (i.e. font-size, color, etc.).
 // Those should be defined as custom properties in the `_variables.scss` file.
 
+@use "sass:list";
 @use "sass:map";
 
 // Prefix for custom properties and other naming conventions.
@@ -14,6 +15,13 @@ $prefix: "#{$id}-" !default;
 
 // Settings.
 $use-important: true !default;
+$generate-base-colors: true !default;
+$generate-base-themes: true !default;
+$generate-base-theme-maps: true !default;
+$generate-base-font-sizes: true !default;
+$generate-base-font-weights: true !default;
+$generate-state-classes: true !default;
+$generate-base-utilities: true !default;
 $screen-aware-utilities: true !default;
 $theme-aware-utilities: true !default;
 $state-aware-utilities: true !default;
@@ -24,7 +32,7 @@ $use-layers: true !default;
 $content-max-width: 96ch !default;
 
 // Screen sizes.
-$base-screen-sizes: (
+$-screen-sizes: (
   xs: 0,
   sm: 48ch,
   md: 72ch,
@@ -32,8 +40,17 @@ $base-screen-sizes: (
   xl: 156ch,
 );
 $custom-screen-sizes: () !default;
-$screen-sizes: map.merge($base-screen-sizes, $custom-screen-sizes);
-$base-screen-size-triggers: (
+$screen-sizes: () !default;
+
+// @todo remove this once $custom-screen-sizes is removed
+@if $custom-screen-sizes != () {
+  @warn "`$custom-screen-sizes` is deprecated and will be removed in a future release of Graupl. Use `$screen-sizes` instead.";
+
+  $screen-sizes: map.merge($screen-sizes, $custom-screen-sizes);
+}
+
+$screen-sizes: map.merge($-screen-sizes, $screen-sizes);
+$-screen-size-triggers: (
   navigation-collapse: (
     mixin: "down",
     args: (
@@ -66,25 +83,55 @@ $base-screen-size-triggers: (
   ),
 );
 $custom-screen-size-triggers: () !default;
-$screen-size-triggers: map.merge(
-  $base-screen-size-triggers,
-  $custom-screen-size-triggers
-);
+$screen-size-triggers: () !default;
+
+// @todo remove this once $custom-screen-size-triggers is removed
+@if $custom-screen-size-triggers != () {
+  @warn "`$custom-screen-size-triggers` is deprecated and will be removed in a future release of Graupl. Use `$screen-size-triggers` instead.";
+
+  $screen-size-triggers: map.merge(
+    $screen-size-triggers,
+    $custom-screen-size-triggers
+  );
+}
+
+$screen-size-triggers: map.merge($-screen-size-triggers, $screen-size-triggers);
 
 // Container sizes.
-$base-container-sizes: $screen-sizes;
+$-container-sizes: $screen-sizes;
 $custom-container-sizes: () !default;
-$container-sizes: map.merge($base-container-sizes, $custom-container-sizes);
-$base-container-size-triggers: $screen-size-triggers;
+$container-sizes: () !default;
+
+// @todo remove this once $custom-container-sizes is removed
+@if $custom-container-sizes != () {
+  @warn "`$custom-container-sizes` is deprecated and will be removed in a future release of Graupl. Use `$container-sizes` instead.";
+
+  $container-sizes: map.merge($container-sizes, $custom-container-sizes);
+}
+
+$container-sizes: map.merge($-container-sizes, $container-sizes);
+$-container-size-triggers: $screen-size-triggers;
 $custom-container-size-triggers: () !default;
+$container-size-triggers: () !default;
+
+// @todo remove this once $custom-container-size-triggers is removed
+@if $custom-container-size-triggers != () {
+  @warn "`$custom-container-size-triggers` is deprecated and will be removed in a future release of Graupl. Use `$container-size-triggers` instead.";
+
+  $container-size-triggers: map.merge(
+    $container-size-triggers,
+    $custom-container-size-triggers
+  );
+}
+
 $container-size-triggers: map.merge(
-  $base-container-size-triggers,
-  $custom-container-size-triggers
+  $-container-size-triggers,
+  $container-size-triggers
 );
 
 // Spacing properties.
 $spacer: 1rem !default;
-$base-spacer-multipliers: (
+$-spacer-multipliers: (
   0: 0,
   1: 0.125,
   2: 0.25,
@@ -98,10 +145,19 @@ $base-spacer-multipliers: (
   10: 10,
 );
 $custom-spacer-multipliers: () !default;
-$spacer-multipliers: map.merge(
-  $base-spacer-multipliers,
-  $custom-spacer-multipliers
-);
+$spacer-multipliers: () !default;
+
+// @todo remove this once $custom-spacer-multipliers is removed
+@if $custom-spacer-multipliers != () {
+  @warn "`$custom-spacer-multipliers` is deprecated and will be removed in a future release of Graupl. Use `$spacer-multipliers` instead.";
+
+  $spacer-multipliers: map.merge(
+    $spacer-multipliers,
+    $custom-spacer-multipliers
+  );
+}
+
+$spacer-multipliers: map.merge($-spacer-multipliers, $spacer-multipliers);
 
 // Size properties.
 $interactive-min-width: 44px !default;
@@ -115,16 +171,25 @@ $border-style: solid !default;
 // Transition properties.
 $transition-duration-base: 100 !default;
 $transition-timing-function: ease !default;
-$base-transition-durations: (
+$-transition-durations: (
   fast: #{$transition-duration-base * 1.5}ms,
   default: #{$transition-duration-base * 2.5}ms,
   slow: #{$transition-duration-base * 3}ms,
 );
 $custom-transition-durations: () !default;
-$transition-durations: map.merge(
-  $base-transition-durations,
-  $custom-transition-durations
-);
+$transition-durations: () !default;
+
+// @todo remove this once $custom-transition-durations is removed
+@if $custom-transition-durations != () {
+  @warn "`$custom-transition-durations` is deprecated and will be removed in a future release of Graupl. Use `$transition-durations` instead.";
+
+  $transition-durations: map.merge(
+    $transition-durations,
+    $custom-transition-durations
+  );
+}
+
+$transition-durations: map.merge($-transition-durations, $transition-durations);
 
 // Selector properties.
 $element-selector-base: "" !default;
@@ -143,32 +208,85 @@ $container-aware-selector-prefix: "cq\\:" !default;
 
 // State selectors.
 $state-selector-base: $modifier-selector-base !default;
-$base-state-selectors: (
+$-state-selectors: (
   visited: (
-    "#{$state-selector-base}visited",
     ":visited",
   ),
   focus: (
-    "#{$state-selector-base}focus",
     ":focus-visible",
   ),
   hover: (
-    "#{$state-selector-base}hover",
     ":hover",
   ),
   active: (
-    "#{$state-selector-base}active",
     ":active",
   ),
   disabled: (
-    "#{$state-selector-base}disabled",
     ":disabled",
     "[disabled]",
     "[aria-disabled=true]",
   ),
 );
+$-state-class-selectors: (
+  visited: (
+    "#{$state-selector-base}visited",
+  ),
+  focus: (
+    "#{$state-selector-base}focus",
+  ),
+  hover: (
+    "#{$state-selector-base}hover",
+  ),
+  active: (
+    "#{$state-selector-base}active",
+  ),
+  disabled: (
+    "#{$state-selector-base}disabled",
+  ),
+);
+
+// Merge the state class selectors with the state selectors.
+@if $generate-state-classes {
+  @each $state, $selectors in $-state-selectors {
+    $-state-selectors: map.set(
+      $-state-selectors,
+      $state,
+      list.join($selectors, map.get($-state-class-selectors, $state))
+    );
+  }
+}
+
 $custom-state-selectors: () !default;
-$state-selectors: map.merge($base-state-selectors, $custom-state-selectors);
+$state-selectors: () !default;
+
+// @todo remove this once $custom-state-selectors is removed
+@if $custom-state-selectors != () {
+  @warn "`$custom-state-selectors` is deprecated and will be removed in a future release of Graupl. Use `$state-selectors` instead.";
+
+  @each $state, $selectors in $custom-state-selectors {
+    @if map.has-key($state-selectors, $state) {
+      $state-selectors: map.set(
+        $state-selectors,
+        $state,
+        list.join(map.get($state-selectors, $state), $selectors)
+      );
+    } @else {
+      $state-selectors: map.set($state-selectors, $state, $selectors);
+    }
+  }
+}
+
+@each $state, $selectors in $-state-selectors {
+  @if map.has-key($state-selectors, $state) {
+    $state-selectors: map.set(
+      $state-selectors,
+      $state,
+      list.join(map.get($state-selectors, $state), $selectors)
+    );
+  } @else {
+    $state-selectors: map.set($state-selectors, $state, $selectors);
+  }
+}
 
 // Utility properties.
 $utility-selector-base: $modifier-selector-base !default;

package/src/scss/base/button/_defaults.scss

@@ -12,6 +12,7 @@
 // Button selectors.
 $selector-base: root-defaults.$component-selector-base !default;
 $modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
 $button-selector-base: $selector-base !default;
 $button-selector: "button" !default;
 $button-link-selector-base: $modifier-selector-base !default;
@@ -33,7 +34,7 @@ $button-disabled-transform: $button-initial-transform !default;
 // and primary--900 as the border colour.
 //
 // Secondary/tertiary buttons will use the same shade for their respective colours.
-$base-button-state-theme-map: (
+$-button-state-theme-map: (
   color: 900,
   border-color: 700,
   hover-color: 100,
@@ -43,7 +44,22 @@ $base-button-state-theme-map: (
   disabled-border-color: 200,
 );
 $custom-button-state-theme-map: () !default;
-$button-state-theme-map: map.merge(
-  $base-button-state-theme-map,
-  $custom-button-state-theme-map
-);
+$button-state-theme-map: () !default;
+
+// @todo remove this once $custom-button-state-theme-map is removed
+@if $custom-button-state-theme-map != () {
+  @warn "`$custom-button-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$button-state-theme-map` instead.";
+
+  $button-state-theme-map: map.merge(
+    $button-state-theme-map,
+    $custom-button-state-theme-map
+  );
+}
+
+// Merge the custom button state theme map with the default one.
+@if $generate-base-theme-map {
+  $button-state-theme-map: map.merge(
+    $-button-state-theme-map,
+    $button-state-theme-map
+  );
+}

package/src/scss/base/button/_mixins.scss

@@ -61,7 +61,7 @@
   background: $button-background;
   color: $button-color;
 
-  @each $color, $map in map.get(color.$themes, active) {
+  @each $color in theme.get-colors() {
     // e.g. &.primary, &.secondary, &.tertiary
     &#{defaults.$button-theme-selector-base}#{defaults.$button-theme-selector-prefix}#{$color} {
       @each $prop, $shade in defaults.$button-state-theme-map {

package/src/scss/base/table/_defaults.scss

@@ -12,6 +12,7 @@
 // Table selectors.
 $selector-base: root-defaults.$element-selector-base !default;
 $modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
 $table-selector-base: $selector-base !default;
 $table-selector: "table" !default;
 $table-caption-selector-base: $selector-base !default;
@@ -53,7 +54,7 @@ $table-caption-side: bottom !default;
 // and primary--100 as the header text colour.
 //
 // Secondary/tertiary tables will use the same shade for their respective colours.
-$base-table-theme-map: (
+$-table-theme-map: (
   header-background: 700,
   header-color: 100,
   striped-background: 200,
@@ -65,4 +66,16 @@ $base-table-theme-map: (
   highlight-color: 100,
 );
 $custom-table-theme-map: () !default;
-$table-theme-map: map.merge($base-table-theme-map, $custom-table-theme-map);
+$table-theme-map: () !default;
+
+// @todo remove this once $custom-table-theme-map is removed
+@if $custom-table-theme-map != () {
+  @warn "`$custom-table-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$table-theme-map` instead.";
+
+  $table-theme-map: map.merge($table-theme-map, $custom-table-theme-map);
+}
+
+// Merge the custom table theme map with the default one.
+@if $generate-base-theme-map {
+  $table-theme-map: map.merge($-table-theme-map, $table-theme-map);
+}

package/src/scss/base/table/_index.scss

@@ -223,16 +223,13 @@
 @include layer(theme) {
   // table
   #{defaults.$table-selector-base}#{defaults.$table-selector} {
-    @each $variant in theme.variants() {
+    @each $color in theme.get-colors() {
       // e.g. &.primary, &.secondary, &.tertiary,
       // e.g. .primary, .secondary, .tertiary
-      &#{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$variant},
-      #{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$variant} {
+      &#{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$color},
+      #{defaults.$table-theme-prefix-selector-base}#{defaults.$table-theme-prefix-selector}#{$color} {
         @each $prop, $key in defaults.$table-theme-map {
-          --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
-              $variant,
-              $key
-            )};
+          --#{root-defaults.$prefix}table-#{$prop}: #{theme.get($color, $key)};
         }
       }
     }

package/src/scss/component/alert/_defaults.scss

@@ -6,9 +6,11 @@
 // They should not be used to define direct property values (i.e. font-size, color, etc.).
 // Those should be defined as custom properties in the `_variables.scss` file.
 
+@use "../../defaults" as root-defaults;
 @use "sass:map";
 
 // Alert selectors.
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
 $alert-selector: ".alert" !default;
 $alert-theme-selector-prefix: "." !default;
 $alert-body-selector: ".alert-body" !default;
@@ -29,7 +31,7 @@ $alert-transition-selector: ".transitioning" !default;
 // and primary--900 as the border colour.
 //
 // Secondary/tertiary alerts will use the same shade for their respective colours.
-$base-alert-state-theme-map: (
+$-alert-state-theme-map: (
   color: 900,
   background: 200,
   border-color: 700,
@@ -43,7 +45,22 @@ $base-alert-state-theme-map: (
   link-disabled-color: 400,
 );
 $custom-alert-state-theme-map: () !default;
-$alert-state-theme-map: map.merge(
-  $base-alert-state-theme-map,
-  $custom-alert-state-theme-map
-);
+$alert-state-theme-map: () !default;
+
+// @todo remove this once $custom-alert-state-theme-map is removed
+@if $custom-alert-state-theme-map != () {
+  @warn "`$custom-alert-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$alert-state-theme-map` instead.";
+
+  $alert-state-theme-map: map.merge(
+    $alert-state-theme-map,
+    $custom-alert-state-theme-map
+  );
+}
+
+// Merge the custom alert state theme map with the default one.
+@if $generate-base-theme-map {
+  $alert-state-theme-map: map.merge(
+    $-alert-state-theme-map,
+    $alert-state-theme-map
+  );
+}