@graupl/core 1.0.0-beta.15 → 1.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/core",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.8",
   "description": "The core module of Graupl, providing essential styles and utilities.",
   "main": "dist/js/graupl.cjs.js",
   "module": "dist/js/graupl.es.js",
@@ -21,37 +21,6 @@
     },
     "./src/*.scss": {
       "sass": "./src/scss/*.scss"
-    },
-    "./src/*.js": {
-      "import": "./src/js/*.js"
-    },
-    "./accordion": {
-      "import": "./dist/js/component/accordion.es.js",
-      "require": "./dist/js/component/accordion.cjs.js"
-    },
-    "./accordion/generator": {
-      "import": "./dist/js/generator/accordion.es.js",
-      "require": "./dist/js/generator/accordion.cjs.js"
-    },
-    "./alert": {
-      "import": "./dist/js/component/alert.es.js",
-      "require": "./dist/js/component/alert.cjs.js"
-    },
-    "./alert/generator": {
-      "import": "./dist/js/generator/alert.es.js",
-      "require": "./dist/js/generator/alert.cjs.js"
-    },
-    "./carousel": {
-      "import": "./dist/js/component/carousel.es.js",
-      "require": "./dist/js/component/carousel.cjs.js"
-    },
-    "./carousel/generator": {
-      "import": "./dist/js/generator/carousel.es.js",
-      "require": "./dist/js/generator/carousel.cjs.js"
-    },
-    "./navigation/generator": {
-      "import": "./dist/js/generator/navigation.es.js",
-      "require": "./dist/js/generator/navigation.cjs.js"
     }
   },
   "repository": {
@@ -74,14 +43,7 @@
   },
   "license": "ISC",
   "homepage": "https://github.com/Graupl/graupl/tree/main/packages/core#readme",
-  "scripts": {
-    "presass": "rm -rf dist/css/*",
-    "sass": "sass scss:dist/css --pkg-importer=node",
-    "postcss": "postcss 'dist/css/**/*.css' --replace --config ./postcss.config.cjs",
-    "prerolldown": "rm -rf dist/js/*",
-    "rolldown": "rolldown --config ./rolldown.config.js",
-    "build": "npm-run-all build:*",
-    "build:css": "npm run sass && npm run postcss",
-    "build:js": "npm run rolldown"
+  "devDependencies": {
+    "sass": "^1.89.2"
   }
 }

package/scss/base/button.scss

@@ -1,3 +1,3 @@
-// @graupl/core button base.
+// @graupl/graupl button base.
 
 @forward "../../src/scss/base/button";

package/scss/base/form.scss

@@ -1,3 +1,3 @@
-// @graupl/core form base.
+// @graupl/graupl form base.
 
 @forward "../../src/scss/base/form";

package/scss/base/link.scss

@@ -1,3 +1,3 @@
-// @graupl/core link base.
+// @graupl/graupl link base.
 
 @forward "../../src/scss/base/link";

package/scss/base/table.scss

@@ -1,3 +1,3 @@
-// @graupl/core table base.
+// @graupl/graupl table base.
 
 @forward "../../src/scss/base/table";

package/scss/base.scss

@@ -1,3 +1,3 @@
-// @graupl/core base.
+// @graupl/graupl base.
 
 @forward "../src/scss/base";

package/scss/component/accordion.scss

@@ -1,3 +1,3 @@
-// @graupl/core accordion component.
+// @graupl/graupl accordion component.
 
 @forward "../../src/scss/component/accordion";

package/scss/component/alert.scss

@@ -1,3 +1,3 @@
-// @graupl/core alert component.
+// @graupl/graupl alert component.
 
 @forward "../../src/scss/component/alert";

package/scss/component/card.scss

@@ -1,3 +1,3 @@
-// @graupl/core card component.
+// @graupl/graupl card component.
 
 @forward "../../src/scss/component/card";

package/scss/component/carousel.scss

@@ -1,3 +1,3 @@
-// @graupl/core carousel component.
+// @graupl/graupl carousel component.
 
 @forward "../../src/scss/component/carousel";

package/scss/component/input-group.scss

@@ -1,3 +1,3 @@
-// @graupl/core input group component.
+// @graupl/graupl input group component.
 
 @forward "../../src/scss/component/input-group";

package/scss/component/list.scss

@@ -1,3 +1,3 @@
-// @graupl/core list component.
+// @graupl/graupl list component.
 
 @forward "../../src/scss/component/list";

package/scss/component/menu.scss

@@ -1,3 +1,3 @@
-// @graupl/core menu component.
+// @graupl/graupl menu component.
 
 @forward "../../src/scss/component/menu";

package/scss/component/navigation.scss

@@ -1,3 +1,3 @@
-// @graupl/core navigation component.
+// @graupl/graupl navigation component.
 
 @forward "../../src/scss/component/navigation";

package/scss/component.scss

@@ -1,3 +1,3 @@
-// @graupl/core components.
+// @graupl/graupl components.
 
 @forward "../src/scss/component";

package/scss/graupl.scss

@@ -1,3 +1,3 @@
-// @graupl/core.
+// @graupl/graupl.
 
 @forward "../src/scss";

package/scss/init.scss

@@ -1,3 +1,3 @@
-// @graupl/core layer initialization.
+// @graupl/graupl layer initialization.
 
 @forward "../src/scss/init";

package/scss/layout/columns.scss

@@ -1,3 +1,3 @@
-// @graupl/core columns layout.
+// @graupl/graupl columns layout.
 
 @forward "../../src/scss/layout/columns";

package/scss/layout/container.scss

@@ -1,3 +1,3 @@
-// @graupl/core container layout.
+// @graupl/graupl container layout.
 
 @forward "../../src/scss/layout/container";

package/scss/layout/flex-columns.scss

@@ -1,3 +1,3 @@
-// @graupl/core flex columns layout.
+// @graupl/graupl flex columns layout.
 
 @forward "../../src/scss/layout/flex-columns";

package/scss/layout.scss

@@ -1,3 +1,3 @@
-// @graupl/core layout.
+// @graupl/graupl layout.
 
 @forward "../src/scss/";

package/scss/normalize.scss

@@ -1,3 +1,3 @@
-// @graupl/core normalize.
+// @graupl/graupl normalize.
 
 @forward "../src/scss/normalize";

package/scss/state/focus.scss

@@ -1,3 +1,3 @@
-// @graupl/core focus state.
+// @graupl/graupl focus state.
 
 @forward "../../src/scss/state/focus";

package/scss/state.scss

@@ -1,3 +1,3 @@
-// @graupl/core state.
+// @graupl/graupl state.
 
 @forward "../src/scss/state";

package/scss/theme/color.scss

@@ -1,3 +1,3 @@
-// @graupl/core color theme.
+// @graupl/graupl color theme.
 
 @forward "../../src/scss/theme/color";

package/scss/theme/typography.scss

@@ -1,3 +1,3 @@
-// @graupl/core typography theme.
+// @graupl/graupl typography theme.
 
 @forward "../../src/scss/theme/typography";

package/scss/theme.scss

@@ -1,3 +1,3 @@
-// @graupl/core theme.
+// @graupl/graupl theme.
 
 @forward "../src/scss/theme";

package/scss/utilities/alignment.scss

@@ -1,3 +1,3 @@
-// @graupl/core alignment utilities.
+// @graupl/graupl alignment utilities.
 
 @forward "../../src/scss/utilities/alignment";

package/scss/utilities/background.scss

@@ -1,3 +1,3 @@
-// @graupl/core background utilities.
+// @graupl/graupl background utilities.
 
 @forward "../../src/scss/utilities/background";

package/scss/utilities/border.scss

@@ -1,3 +1,3 @@
-// @graupl/core border utilities.
+// @graupl/graupl border utilities.
 
 @forward "../../src/scss/utilities/border";

package/scss/utilities/color.scss

@@ -1,3 +1,3 @@
-// @graupl/core color utilities.
+// @graupl/graupl color utilities.
 
 @forward "../../src/scss/utilities/color";

package/scss/utilities/container.scss

@@ -1,3 +1,3 @@
-// @graupl/core container utilities.
+// @graupl/graupl container utilities.
 
 @forward "../../src/scss/utilities/container";

package/scss/utilities/display.scss

@@ -1,3 +1,3 @@
-// @graupl/core display utilities.
+// @graupl/graupl display utilities.
 
 @forward "../../src/scss/utilities/display";

package/scss/utilities/flex.scss

@@ -1,3 +1,3 @@
-// @graupl/core flex utilities.
+// @graupl/graupl flex utilities.
 
 @forward "../../src/scss/utilities/flex";

package/scss/utilities/gradient.scss

@@ -1,3 +1,3 @@
-// @graupl/core gradient utilities.
+// @graupl/graupl gradient utilities.
 
 @forward "../../src/scss/utilities/gradient";

package/scss/utilities/height.scss

@@ -1,3 +1,3 @@
-// @graupl/core height utilities.
+// @graupl/graupl height utilities.
 
 @forward "../../src/scss/utilities/height";

package/scss/utilities/inset.scss

@@ -1,3 +1,3 @@
-// @graupl/core inset utilities.
+// @graupl/graupl inset utilities.
 
 @forward "../../src/scss/utilities/inset";

package/scss/utilities/justification.scss

@@ -1,3 +1,3 @@
-// @graupl/core justification utilities.
+// @graupl/graupl justification utilities.
 
 @forward "../../src/scss/utilities/justification";

package/scss/utilities/list.scss

@@ -1,3 +1,3 @@
-// @graupl/core list utilities.
+// @graupl/graupl list utilities.
 
 @forward "../../src/scss/utilities/list";

package/scss/utilities/order.scss

@@ -1,3 +1,3 @@
-// @graupl/core order utilities.
+// @graupl/graupl order utilities.
 
 @forward "../../src/scss/utilities/order";

package/scss/utilities/position.scss

@@ -1,3 +1,3 @@
-// @graupl/core position utilities.
+// @graupl/graupl position utilities.
 
 @forward "../../src/scss/utilities/position";

package/scss/utilities/ratio.scss

@@ -1,3 +1,3 @@
-// @graupl/core ratio utilities.
+// @graupl/graupl ratio utilities.
 
 @forward "../../src/scss/utilities/ratio";

package/scss/utilities/spacing.scss

@@ -1,3 +1,3 @@
-// @graupl/core spacing utilities.
+// @graupl/graupl spacing utilities.
 
 @forward "../../src/scss/utilities/spacing";

package/scss/utilities/typography.scss

@@ -1,3 +1,3 @@
-// @graupl/core typography utilities.
+// @graupl/graupl typography utilities.
 
 @forward "../../src/scss/utilities/typography";

package/scss/utilities/visibility.scss

@@ -1,3 +1,3 @@
-// @graupl/core visibility utilities.
+// @graupl/graupl visibility utilities.
 
 @forward "../../src/scss/utilities/visibility";

package/scss/utilities/visually-hidden.scss

@@ -1,3 +1,3 @@
-// @graupl/core visually-hidden utilities.
+// @graupl/graupl visually-hidden utilities.
 
 @forward "../../src/scss/utilities/visually-hidden";

package/scss/utilities/width.scss

@@ -1,3 +1,3 @@
-// @graupl/core width utilities.
+// @graupl/graupl width utilities.
 
 @forward "../../src/scss/utilities/width";

package/scss/utilities/z-index.scss

@@ -1,3 +1,3 @@
-// @graupl/core z-index utilities.
+// @graupl/graupl z-index utilities.
 
 @forward "../../src/scss/utilities/z-index";

package/scss/utilities.scss

@@ -1,3 +1,3 @@
-// @graupl/core utilities.
+// @graupl/graupl utilities.
 
 @forward "../src/scss/utilities";

package/src/js/accordion/Accordion.js

@@ -234,7 +234,7 @@ class Accordion {
     optionalKeySupport = false,
     allowMultipleExpand = true,
     allowNoExpand = true,
-    prefix = "graupl-",
+    prefix = "am-",
     key = null,
     initialize = false,
   }) {

package/src/js/accordion/index.js

@@ -1,5 +1,10 @@
-import generate from "./generator.js";
+import Accordion from "./Accordion.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  generate();
+  document.querySelectorAll(".accordion").forEach((accordionElement) => {
+    new Accordion({
+      accordionElement,
+      initialize: true,
+    });
+  });
 });

package/src/js/alert/index.js

@@ -1,5 +1,11 @@
-import generate from "./generator.js";
+import Alert from "./Alert.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  generate();
+  document.querySelectorAll(".alert").forEach((alertElement) => {
+    new Alert({
+      alertElement,
+      controllerElement: alertElement.querySelector(".alert-dismisser") || null,
+      initialize: true,
+    });
+  });
 });

package/src/js/carousel/index.js

@@ -1,5 +1,10 @@
-import generate from "./generator.js";
+import Carousel from "./Carousel.js";
 
 document.addEventListener("DOMContentLoaded", () => {
-  generate();
+  document.querySelectorAll(".carousel").forEach((carouselElement) => {
+    new Carousel({
+      carouselElement,
+      initialize: true,
+    });
+  });
 });

package/src/js/domHelpers.js

@@ -35,79 +35,3 @@ export function removeClass(className, element) {
     element.classList.remove(...className);
   }
 }
-
-/**
- * Select all focusable elements within a given context.
- *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement[]} - An array of focusable elements.
- */
-export function selectAllFocusableElements(context = document) {
-  const querySelector =
-    "a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),[tabindex]";
-  const elements = Array.from(context.querySelectorAll(querySelector));
-
-  const tabbableElements = elements.filter((element) => {
-    let check = true;
-
-    if (element.getAttribute("tabindex") === "-1") check = false;
-
-    return check;
-  });
-
-  return tabbableElements;
-}
-
-/**
- * Select the first focusable element within a given context.
- *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The first focusable element or false if none found.
- */
-export function selectFirstFocusableElement(context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-
-  return tabbableElements[0] || false;
-}
-
-/**
- * Select the last focusable element within a given context.
- *
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The last focusable element or false if none found.
- */
-export function selectLastFocusableElement(context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-
-  return tabbableElements[tabbableElements.length - 1] || false;
-}
-
-/**
- * Select the next focusable element relative to the given element within a context.
- *
- * @param {HTMLElement} element - The reference element.
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The next focusable element or false if none found.
- */
-export function selectNextFocusableElement(element, context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-  const index = tabbableElements.indexOf(element);
-
-  return index === tabbableElements.length - 1
-    ? false
-    : tabbableElements[index + 1];
-}
-
-/**
- * Select the previous focusable element relative to the given element within a context.
- *
- * @param {HTMLElement} element - The reference element.
- * @param {HTMLElement} [context = document] - The context in which to search for focusable elements.
- * @return {HTMLElement|boolean} - The previous focusable element or false if none found.
- */
-export function selectPreviousFocusableElement(element, context = document) {
-  const tabbableElements = selectAllFocusableElements(context);
-  const index = tabbableElements.indexOf(element);
-
-  return index === 0 ? false : tabbableElements[index - 1];
-}

package/src/js/navigation/index.js

@@ -1,5 +1,36 @@
-import generate from "./generator.js";
+import storage from "../storage.js";
 
 document.addEventListener("DOMContentLoaded", function () {
-  generate();
+  const navs = document.querySelectorAll(".navigation");
+
+  navs.forEach((nav) => {
+    const MenuConstructor = nav.dataset.grauplMenuType || DisclosureMenu;
+
+    if (window[MenuConstructor] === undefined) {
+      console.warn(
+        `Graupl navigation requires accessible-menu's ${MenuConstructor}. Please make sure to include it on this page.`
+      );
+
+      return;
+    }
+
+    const menuOptions =
+      JSON.parse(nav.dataset.grauplMenuOptions.replace(/'/g, '"')) || {};
+    const menuElement = nav.querySelector(".menu");
+    const controllerElement = nav.querySelector(".navigation-toggle") || null;
+    const containerElement = controllerElement ? nav : null;
+    const menu = new window[MenuConstructor]({
+      menuElement,
+      menuItemSelector: ".menu-item",
+      menuLinkSelector: ".menu-link",
+      submenuItemSelector: ".submenu-item",
+      submenuToggleSelector: ".submenu-toggle",
+      controllerElement,
+      containerElement,
+      ...menuOptions,
+    });
+
+    storage.initializeStorage("menus");
+    storage.pushToStorage("menus", menu.dom.menu.id, menu);
+  });
 });