@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.10

package/packages/icons/src/scss/component/icon/_defaults.scss

@@ -0,0 +1,30 @@
+// @graupl/icons icon component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// 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 "pkg:@graupl/core/src/scss/defaults" as root-defaults;
+
+// Icon selectors.
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$icon-selector-base: $selector-base !default;
+$icon-selector: "icon" !default;
+$icon-before-selector: "#{$icon-selector}-before" !default;
+$icon-after-selector: "#{$icon-selector}-after" !default;
+$icon-prefix-selector-base: $modifier-selector-base !default;
+$icon-prefix-selector: "" !default;
+$icon-color-prefix-selector-base: $modifier-selector-base !default;
+$icon-color-prefix-selector: "" !default;
+
+// Icon properties.
+$icon-display: inline-block !default;
+$icon-size: 1.25em !default;
+
+// Icons.
+// This should be a key/value pair for the name of the icon and the path to the icon's SVG.
+$custom-icons: () !default;
+$icons: $custom-icons;

package/packages/icons/src/scss/component/icon/_index.scss

@@ -0,0 +1,60 @@
+// @gruapl/icons icon component styles.
+
+@use "defaults";
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/theme/color/variables" as color;
+@use "pkg:@graupl/core/src/mixins/layer" as *;
+@use "mixins" as *;
+@use "sass:map";
+
+@include layer(component) {
+  #{defaults.$icon-selector-base}#{defaults.$icon-selector} {
+    @include apply-component;
+  }
+
+  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector} {
+    @include apply-component("before");
+  }
+
+  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {
+    @include apply-component("after");
+  }
+
+  #{defaults.$icon-selector-base}#{defaults.$icon-selector},
+  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector},
+  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {
+    @each $name, $icon in defaults.$icons {
+      &#{defaults.$icon-prefix-selector-base}#{defaults.$icon-prefix-selector}#{$name} {
+        --#{root-defaults.$prefix}icon: #{$icon};
+      }
+    }
+  }
+}
+
+@include layer(theme) {
+  #{defaults.$icon-selector-base}#{defaults.$icon-selector} {
+    @include apply-theme;
+  }
+
+  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector} {
+    @include apply-theme("before");
+  }
+
+  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {
+    @include apply-theme("after");
+  }
+
+  #{defaults.$icon-selector-base}#{defaults.$icon-selector},
+  #{defaults.$icon-selector-base}#{defaults.$icon-before-selector},
+  #{defaults.$icon-selector-base}#{defaults.$icon-after-selector} {
+    @each $color, $map in map.get(color.$themes, active) {
+      @each $shade, $value in $map {
+        $name: #{$color}-#{$shade};
+
+        &#{defaults.$icon-color-prefix-selector-base}#{defaults.$icon-color-prefix-selector}#{$name} {
+          --#{root-defaults.$prefix}icon-color: #{$value};
+        }
+      }
+    }
+  }
+}

package/packages/icons/src/scss/component/icon/_mixins.scss

@@ -0,0 +1,62 @@
+// @graupl/icons icon mixins.
+
+@use "variables" as *;
+
+@mixin _component() {
+  display: $icon-display;
+  width: $icon-width;
+  height: $icon-height;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  vertical-align: sub;
+  mask-image: $icon;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  mask-position: center;
+}
+
+@mixin _theme() {
+  background-color: $icon-color;
+}
+
+@mixin apply-component($target: "self") {
+  @if $target == "before" {
+    &::before {
+      @include _component;
+
+      content: "";
+      margin-inline-end: $icon-spacer;
+    }
+  } @else if $target == "after" {
+    &::after {
+      @include _component;
+
+      content: "";
+      margin-inline-start: $icon-spacer;
+    }
+  } @else {
+    @include _component;
+
+    margin-inline: $icon-spacer $icon-spacer;
+  }
+}
+
+@mixin apply-theme($target: "self") {
+  @if $target == "before" {
+    &::before {
+      @include _theme;
+    }
+  } @else if $target == "after" {
+    &::after {
+      @include _theme;
+    }
+  } @else {
+    @include _theme;
+  }
+}
+
+@mixin apply($target: "self") {
+  @include apply-component($target);
+  @include apply-theme($target);
+}

package/packages/icons/src/scss/component/icon/_variables.scss

@@ -0,0 +1,24 @@
+// @graupl/icons icon componet variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/theme/color/variables" as color;
+@use "pkg:@graupl/core/src/variables" as root-variables;
+@use "sass:map";
+
+$icon-display: var(
+  --#{root-defaults.$prefix}icon-display,
+  #{defaults.$icon-display}
+);
+$icon-size: var(--#{root-defaults.$prefix}icon-size, #{defaults.$icon-size});
+$icon-width: var(--#{root-defaults.$prefix}icon-width, #{$icon-size});
+$icon-height: var(--#{root-defaults.$prefix}icon-height, #{$icon-size});
+$icon-color: var(--#{root-defaults.$prefix}icon-color, #{color.$color});
+$icon: var(--#{root-defaults.$prefix}icon, none);
+$icon-spacer: var(
+  --#{root-defaults.$prefix}icon-spacer,
+  #{map.get(root-variables.$spacers, 2)}
+);

package/postcss.config.cjs

@@ -1,11 +1,10 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: [
+    require("postcss-discard-comments"),
+    // require("./combine-at-rules.cjs")({ atRules: ["layer"] }),
     require("autoprefixer"),
-    // @todo: add cssnano when ready
-    // Waiting on upstream issue for postcss-calc: https://github.com/postcss/postcss-calc/issues/77
     require("cssnano"),
-    require("postcss-discard-comments"),
   ],
 };
 

package/scss/base/button.scss

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

package/scss/base/form.scss

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

package/scss/base/link.scss

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

package/scss/base/table.scss

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

package/scss/base.scss

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

package/scss/component/accordion.scss

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

package/scss/component/alert.scss

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

package/scss/component/card.scss

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

package/scss/component/carousel.scss

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

package/scss/component/input-group.scss

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

package/scss/component/list.scss

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

package/scss/component/menu.scss

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

package/scss/component/navigation.scss

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

package/scss/component.scss

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

package/scss/graupl.scss

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

package/scss/init.scss

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

package/scss/layout/columns.scss

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

package/scss/layout/container.scss

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

package/scss/layout/flex-columns.scss

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

package/scss/layout.scss

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

package/scss/normalize.scss

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

package/scss/state/focus.scss

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

package/scss/state.scss

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

package/scss/theme/color.scss

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

package/scss/theme/typography.scss

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

package/scss/theme.scss

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

package/scss/utilities/alignment.scss

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

package/scss/utilities/background.scss

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

package/scss/utilities/border.scss

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

package/scss/utilities/color.scss

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

package/scss/utilities/container.scss

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

package/scss/utilities/display.scss

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

package/scss/utilities/flex.scss

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

package/scss/utilities/gradient.scss

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

package/scss/utilities/height.scss

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

package/scss/utilities/inset.scss

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

package/scss/utilities/justification.scss

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

package/scss/utilities/list.scss

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

package/scss/utilities/order.scss

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

package/scss/utilities/position.scss

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

package/scss/utilities/ratio.scss

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

package/scss/utilities/spacing.scss

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

package/scss/utilities/typography.scss

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

package/scss/utilities/visibility.scss

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

package/scss/utilities/visually-hidden.scss

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

package/scss/utilities/width.scss

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

package/scss/utilities/z-index.scss

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

package/scss/utilities.scss

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

package/stylelint.config.js

@@ -15,6 +15,7 @@ const config = {
     "@stylistic/function-parentheses-space-inside": "never-single-line",
     "@stylistic/indentation": null,
     "@stylistic/block-opening-brace-space-before": "never-single-line",
+    "scss/at-mixin-pattern": "^_?[a-z][a-z0-9]*(-[a-z0-9]+)*$",
   },
 };
 

package/vite.config.js

@@ -1,52 +1,23 @@
 import { resolve } from "path";
 import { defineConfig } from "vite";
 import { fileURLToPath, URL } from "url";
-import process from "process";
 
 // Get the current directory path.
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
-// The type of menu to build from the BUILD_TYPE environment variable.
-// If BUILD_TYPE is not set, the default build is used
-const buildType = process.env.BUILD_TYPE ?? "default";
-
 // Supported build types.
 const formats = ["iife", "esm", "cjs"];
 
-// The library options for the different menus.
-const lib = {
-  default: {
-    entry: resolve(__dirname, "build.js"),
-    name: "Graupl",
-    formats,
-    fileName: (format) => `graupl.${format}.js`,
-  },
-  Accordion: {
-    entry: resolve(__dirname, "/src/js/accordion/Accordion.js"),
-    name: "Accordion",
-    formats,
-    fileName: (format) => `component/accordion.${format}.js`,
-  },
-  Alert: {
-    entry: resolve(__dirname, "/src/js/alert/Alert.js"),
-    name: "Alert",
-    formats,
-    fileName: (format) => `component/alert.${format}.js`,
-  },
-  Carousel: {
-    entry: resolve(__dirname, "/src/js/carousel/Carousel.js"),
-    name: "Carousel",
-    formats,
-    fileName: (format) => `component/carousel.${format}.js`,
-  },
-};
-
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     outDir: "dist/js",
-    lib: lib[buildType] || lib.default,
-    emptyOutDir: false,
+    lib: {
+      entry: resolve(__dirname, "build.js"),
+      name: "Graupl",
+      formats,
+      fileName: (format) => `graupl.${format}.js`,
+    },
   },
   server: {
     host: "0.0.0.0",

package/dist/css/utilities/postion.css

@@ -1,2 +0,0 @@
-@layer graupl.utilities{.position-static{position:static!important}.position-fixed{position:fixed!important}.position-absolute{position:absolute!important}.position-relative{position:relative!important}.position-sticky{position:sticky!important}}
-/*# sourceMappingURL=postion.css.map */

package/dist/css/utilities/postion.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/scss/mixins/_layer.scss","../../../src/scss/mixins/_utility.scss","postion.css"],"names":[],"mappings":"AAQE,wBCEA,iBAYM,yBCnBN,CDOA,gBAYM,wBChBN,CDIA,mBAYM,2BCbN,CDCA,mBAYM,2BCVN,CDFA,iBAYM,yBCPN,CACF","file":"postion.css"}

package/dist/js/component/accordion.cjs.js

@@ -1,3 +0,0 @@
-"use strict";var S=Object.defineProperty;var M=(e,t,i)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[t]=i;var r=(e,t,i)=>M(e,typeof t!="symbol"?t+"":t,i);function g(e,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${i}" given.`)}for(const i in t)if(!(t[i]instanceof e)){const s=typeof t[i];throw new TypeError(`${i} must be an instance of ${e.name}. "${s}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function o(e,t){try{if(typeof t!="object"){const i=typeof t;throw new TypeError(`Values given to isValidType() must be inside of an object. "${i}" given.`)}for(const i in t){const s=typeof t[i];if(s!==e)throw new TypeError(`${i} must be a ${e}. "${s}" given.`)}return{status:!0,error:null}}catch(i){return{status:!1,error:i}}}function E(e){try{if(typeof e!="object"){const t=typeof e;throw new TypeError(`Values given to isQuerySelector() must be inside of an object. "${t}" given.`)}for(const t in e)try{if(e[t]===null)throw new Error;document.querySelector(e[t])}catch{throw new TypeError(`${t} must be a valid query selector. "${e[t]}" given.`)}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function u(e){try{if(typeof e!="object"||Array.isArray(e)){const t=typeof e;throw new TypeError(`Values given to isValidClassList() must be inside of an object. "${t}" given.`)}for(const t in e){const i=typeof e[t];if(i!=="string")if(Array.isArray(e[t]))e[t].forEach(s=>{if(typeof s!="string")throw new TypeError(`${t} must be a string or an array of strings. An array containing non-strings given.`)});else throw new TypeError(`${t} must be a string or an array of strings. "${i}" given.`);else{const s={};s[t]=e[t],E(s)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function _(e,t){if(o("string",{tagName:e}).status&&g(HTMLElement,t).status){const i=e.toLowerCase();let s=!0;for(const n in t)t[n].tagName.toLowerCase()!==i&&(s=!1);return s}else return!1}function m(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.add(e):t.classList.add(...e))}function p(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.remove(e):t.classList.remove(...e))}class C{constructor({accordionItemElement:t,accordionItemToggleElement:i,accordionItemHeaderElement:s,accordionItemContentElement:n,parentAccordion:a=null}){r(this,"_dom",{item:null,toggle:null,header:null,content:null});r(this,"_elements",{parentAccordion:null});r(this,"_open",!1);r(this,"_locked",!1);r(this,"_expandEvent",new CustomEvent("grauplAccordionItemExpand",{bubbles:!0,detail:{item:this}}));r(this,"_collapseEvent",new CustomEvent("grauplAccordionItemCollapse",{bubbles:!0,detail:{item:this}}));this._dom.item=t,this._dom.toggle=i,this._dom.header=s,this._dom.content=n,this._elements.parentAccordion=a}initialize(){this._setIds(),this._setAriaAttributes(),this.dom.toggle.getAttribute("aria-expanded")==="true"?this.show(!1,!1):this.hide(!1,!1)}get dom(){return this._dom}get elements(){return this._elements}get isOpen(){return this._open}get isLocked(){return this._locked}set isOpen(t){o("boolean",{value:t}),this._open!==t&&(this._open=t)}_setIds(){const{key:t}=this.elements.parentAccordion,i=this.elements.parentAccordion.dom.accordionItems.indexOf(this.dom.item);this.dom.item.id=this.dom.item.id||`accordion-item-${t}-${i}`,this.dom.toggle.id=this.dom.toggle.id||`accordion-item-toggle-${t}-${i}`,this.dom.header.id=this.dom.header.id||`accordion-item-header-${t}-${i}`,this.dom.content.id=this.dom.content.id||`accordion-item-content-${t}-${i}`}_setAriaAttributes(){_("button",{toggle:this.dom.toggle})||this.dom.toggle.setAttribute("role","button"),this.dom.toggle.getAttribute("aria-expanded")!=="true"&&this.dom.toggle.setAttribute("aria-expanded","false"),this.dom.toggle.setAttribute("aria-controls",this.dom.content.id),_("section",{content:this.dom.content})||this.dom.content.setAttribute("role","region"),this.dom.content.setAttribute("aria-labelledby",this.dom.toggle.id)}show(t=!0,i=!0){if(this._open)return;const{closeClass:s,openClass:n,transitionClass:a,openDuration:l}=this.elements.parentAccordion;this.dom.toggle.setAttribute("aria-expanded","true"),i&&a!==""?(m(a,this.dom.item),requestAnimationFrame(()=>{p(s,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{m(n,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height+this.dom.content.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{setTimeout(()=>{p(a,this.dom.item),this.dom.item.style.height=""},l)})})})):(m(n,this.dom.item),p(s,this.dom.item)),this._open=!0,this.elements.parentAccordion.allowMultipleExpand||(this.unlockSiblings(),this.closeSiblings()),this.elements.parentAccordion.allowNoExpand||(this.elements.parentAccordion.openAccordionItems.length<=1?this.lock():this.unlockSiblings()),t&&this.dom.item.dispatchEvent(this._expandEvent)}hide(t=!0,i=!0){if(!this._open||!this.elements.parentAccordion.allowNoExpand&&this.elements.parentAccordion.openAccordionItems.length<=1)return;const{closeClass:s,openClass:n,transitionClass:a,closeDuration:l}=this.elements.parentAccordion;this.dom.toggle.setAttribute("aria-expanded","false"),i&&a!==""?(m(a,this.dom.item),this.dom.item.style.height=`${this.dom.item.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{p(n,this.dom.item),this.dom.item.style.height=`${this.dom.header.getBoundingClientRect().height}px`,requestAnimationFrame(()=>{m(s,this.dom.item),requestAnimationFrame(()=>{setTimeout(()=>{p(a,this.dom.item),this.dom.item.style.height=""},l)})})})):(m(s,this.dom.item),p(n,this.dom.item)),this._open=!1,!this.elements.parentAccordion.allowNoExpand&&this.elements.parentAccordion.openAccordionItems.length===1&&this.elements.parentAccordion.openAccordionItems[0].lock(),t&&this.dom.item.dispatchEvent(this._collapseEvent)}toggle(){this.isOpen?this.hide():this.show()}focus(){this.dom.toggle.focus()}blur(){this.dom.toggle.blur()}lock(){this._locked=!0,this.dom.toggle.setAttribute("disabled","true")}unlock(){this._locked=!1,this.dom.toggle.removeAttribute("disabled")}closeSiblings(){this.elements.parentAccordion&&this.elements.parentAccordion.elements.accordionItems.forEach(t=>{t!==this&&t.hide()})}unlockSiblings(){this.elements.parentAccordion&&this.elements.parentAccordion.elements.accordionItems.forEach(t=>{t!==this&&t.unlock()})}}function w(e){try{const t=e.key||e.keyCode,i={Enter:t==="Enter"||t===13,Space:t===" "||t==="Spacebar"||t===32,Escape:t==="Escape"||t==="Esc"||t===27,ArrowUp:t==="ArrowUp"||t==="Up"||t===38,ArrowRight:t==="ArrowRight"||t==="Right"||t===39,ArrowDown:t==="ArrowDown"||t==="Down"||t===40,ArrowLeft:t==="ArrowLeft"||t==="Left"||t===37,Home:t==="Home"||t===36,End:t==="End"||t===35,Tab:t==="Tab"||t===9};return Object.keys(i).find(s=>i[s]===!0)||""}catch{return""}}function h(e){e.preventDefault(),e.stopPropagation()}function L(e=null){window.Graupl=window.Graupl||{},o("string",{type:e})&&(window.Graupl[e]=window.Graupl[e]||{})}function K(e=null){return o("string",{type:e})?window.Graupl[e]:window.Graupl}function O(e,t={}){o("string",{type:e})&&o("object",{data:t})&&(window.Graupl[e]=t)}function G(e){o("string",{type:e})&&(window.Graupl[e]={})}function H(e,t,i){o("string",{type:e,key:t})&&(window.Graupl[e][t]=i)}function j(e,t){return o("string",{type:e,key:t})?window.Graupl[e][t]:null}function F(e,t){o("string",{type:e,key:t})&&delete window.Graupl[e][t]}const y={initializeStorage:L,getStorage:K,setStorage:O,clearStorage:G,pushToStorage:H,getFromStorage:j,removeFromStorage:F};class q{constructor({accordionElement:t,accordionItemSelector:i=".accordion-item",accordionItemToggleSelector:s=".accordion-item-toggle",accordionItemHeaderSelector:n=".accordion-item-header",accordionItemContentSelector:a=".accordion-item-content",openClass:l="show",closeClass:d="hide",transitionClass:f="transitioning",transitionDuration:c=300,openDuration:b=-1,closeDuration:A=-1,optionalKeySupport:I=!1,allowMultipleExpand:k=!0,allowNoExpand:D=!0,prefix:x="am-",key:$=null,initialize:T=!1}){r(this,"_dom",{accordion:null,accordionItems:[],accordionItemToggles:[],accordionItemHeaders:[],accordionItemContents:[]});r(this,"_domLock",["accordion"]);r(this,"_selectors",{accordionItems:"",accordionItemToggles:"",accordionItemHeaders:"",accordionItemContents:""});r(this,"_elements",{accordionItems:[]});r(this,"_openClass","show");r(this,"_closeClass","hide");r(this,"_transitionClass","transitioning");r(this,"_transitionDuration",300);r(this,"_openDuration",-1);r(this,"_closeDuration",-1);r(this,"_optionalKeySupport",!0);r(this,"_allowMultipleExpand",!0);r(this,"_allowNoExpand",!0);r(this,"_currentChild",0);r(this,"_prefix","graupl-");r(this,"_key","");r(this,"_errors",[]);this._dom.accordion=t,this._selectors.accordionItems=i,this._selectors.accordionItemToggles=s,this._selectors.accordionItemHeaders=n,this._selectors.accordionItemContents=a,this._openClass=l||"",this._closeClass=d||"",this._transitionClass=f||"",this._transitionDuration=c,this._openDuration=b,this._closeDuration=A,this._optionalKeySupport=I,this._allowMultipleExpand=k,this._allowNoExpand=D,this._prefix=x||"",this._key=$||"",T&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Accordion: cannot initialize accordion. The following errors have been found:
- - ${this.errors.join(`
- - `)}`);this._generateKey(),this._setDOMElements(),this._setIds(),this._createChildElements(),this._handleFocus(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),this._setTransitionDurations(),y.initializeStorage("accordions"),y.pushToStorage("accordions",this.dom.accordion.id,this)}catch(t){console.error(t)}}get openClass(){return this._openClass}get closeClass(){return this._closeClass}get transitionClass(){return this._transitionClass}get transitionDuration(){return this._transitionDuration}get openDuration(){return this._openDuration===-1?this.transitionDuration:this._openDuration}get closeDuration(){return this._closeDuration===-1?this.transitionDuration:this._closeDuration}get currentChild(){return this._currentChild}get dom(){return this._dom}get elements(){return this._elements}get selectors(){return this._selectors}get optionalKeySupport(){return this._optionalKeySupport}get currentAccordionItem(){return this.elements.accordionItems[this.currentChild]}get openAccordionItems(){return this.elements.accordionItems.filter(t=>t.isOpen)}get allowMultipleExpand(){return this._allowMultipleExpand}get allowNoExpand(){return this._allowNoExpand}get prefix(){return this._prefix}get key(){return this._key}get errors(){return this._errors}set openClass(t){u({openClass:t}),this._openClass!==t&&(this._openClass=t)}set closeClass(t){u({closeClass:t}),this._closeClass!==t&&(this._closeClass=t)}set transitionClass(t){u({transitionClass:t}),this._transitionClass!==t&&(this._transitionClass=t)}set transitionDuration(t){o("number",{value:t}),this._transitionDuration!==t&&(this._transitionDuration=t,this._setTransitionDurations())}set openDuration(t){o("number",{value:t}),this._openDuration!==t&&(this._openDuration=t,this._setTransitionDurations())}set closeDuration(t){o("number",{value:t}),this._closeDuration!==t&&(this._closeDuration=t,this._setTransitionDurations())}set currentChild(t){o("number",{value:t}),this._currentChild!==t&&t>=0&&t<this.elements.accordionItems.length&&(this._currentChild=t)}set accordionItems(t){o("object",{value:t}),t!=null&&t.isArray()&&t.every(i=>i instanceof C)&&(this._accordionItems=t)}set allowMultipleExpand(t){o("boolean",{value:t}),this._allowMultipleExpand!==t&&(this._allowMultipleExpand=t)}set allowNoExpand(t){o("boolean",{value:t}),this._allowNoExpand!==t&&(this._allowNoExpand=t)}set prefix(t){o("string",{value:t}),this._prefix!==t&&(this._prefix=t)}set key(t){o("string",{value:t}),this._key!==t&&(this._key=t)}_setDOMElementType(t,i=this.dom.accordion,s=!0,n=!1){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.contructor.name}: "${t}" element cannot be set through _setDOMElementType.`);i!==this.dom.accordion&&g(HTMLElement,{base:i});const l=Array.from(i.querySelectorAll(this.selectors[t])).filter(d=>n?d.parentElement===i:!0);s?this._dom[t]=l:this._dom[t]=[...this._dom[t],...l]}else throw new Error(`Graupl ${this.contructor.name}: "${t}" is not a valid element type.`)}_resetDOMElementType(t){if(typeof this.selectors[t]=="string"){if(this._domLock.includes(t))throw new Error(`Graupl ${this.contructor.name}: "${t}" element cannot be reset through _resetDOMElementType.`);Array.isArray(this._dom[t])?this._dom[t]=[]:this._dom[t]=null}else throw new Error(`Graupl ${this.contructor.name}: "${t}" is not a valid element type.`)}_setDOMElements(){this._setDOMElementType("accordionItems"),this._resetDOMElementType("accordionItemToggles"),this.dom.accordionItems.forEach(t=>{this._setDOMElementType("accordionItemToggles",t,!1),this._setDOMElementType("accordionItemHeaders",t,!1),this._setDOMElementType("accordionItemContents",t,!1)})}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.accordion.id=this.dom.accordion.id||`accordion-${this.key}`}_createChildElements(){this.dom.accordionItems.forEach((t,i)=>{const s=new C({accordionItemElement:t,accordionItemToggleElement:this.dom.accordionItemToggles[i],accordionItemHeaderElement:this.dom.accordionItemHeaders[i],accordionItemContentElement:this.dom.accordionItemContents[i],parentAccordion:this});s.initialize(),this.elements.accordionItems.push(s)})}_validate(){let t=!0;const i=g(HTMLElement,{accordionElement:this.dom.accordion});i||(this._errors.push(i.message),t=!1);const s=E({accordionItemSelector:this._selectors.accordionItems,accordionItemToggleSelector:this._selectors.accordionItemToggles,accordionItemHeaderSelector:this._selectors.accordionItemHeaders,accordionItemContentSelector:this._selectors.accordionItemContents});if(s||(this._errors.push(s.message),t=!1),this._openClass!==""){const c=u({openClass:this._openClass});c.status||(this._errors.push(c.error.message),t=!1)}if(this._closeClass!==""){const c=u({closeClass:this._closeClass});c.status||(this._errors.push(c.error.message),t=!1)}if(this._transitionClass!==""){const c=u({transitionClass:this._transitionClass});c.status||(this._errors.push(c.error.message),t=!1)}const n=o("number",{transitionDuration:this._transitionDuration});n.status||(this._errors.push(n.error.message),t=!1);const a=o("number",{openDuration:this._openDuration});a.status||(this._errors.push(a.error.message),t=!1);const l=o("number",{closeDuration:this._closeDuration});l.status||(this._errors.push(l.error.message),t=!1);const d=o("boolean",{optionalKeySupport:this._optionalKeySupport,allowMultipleExpand:this._allowMultipleExpand,allowNoExpand:this._allowNoExpand});if(d.status||(this._errors.push(d.error.message),t=!1),this._key!==""){const c=o("string",{key:this._key});c.status||(this._errors.push(c.error.message),t=!1)}const f=o("string",{prefix:this._prefix});return f.status||(this._errors.push(f.error.message),t=!1),t}_handleFocus(){this.elements.accordionItems.forEach((t,i)=>{t.dom.toggle.addEventListener("focus",()=>{this.currentChild=i})})}_handleClick(){this.elements.accordionItems.forEach((t,i)=>{t.dom.toggle.addEventListener("pointerup",()=>{this.currentChild=i,t.toggle()})})}_handleKeydown(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keydown",i=>{const s=w(i);(["Space","Enter"].includes(s)||this.optionalKeySupport&&["ArrowDown","ArrowUp","Home","End"].includes(s))&&h(i)})})}_handleKeyup(){this.dom.accordionItemToggles.forEach(t=>{t.addEventListener("keyup",i=>{const s=w(i);switch(s){case"Space":case"Enter":h(i),this.currentAccordionItem.toggle();break}if(this.optionalKeySupport)switch(s){case"Home":h(i),this.focusFirstChild();break;case"End":h(i),this.focusLastChild();break;case"ArrowDown":h(i),this.focusNextChild();break;case"ArrowUp":h(i),this.focusPreviousChild();break}})})}_setTransitionDurations(){this.dom.accordion.style.setProperty(`--${this.prefix}accordion-transition-duration`,`${this.transitionDuration}ms`),this.dom.accordion.style.setProperty(`--${this.prefix}accordion-open-transition-duration`,`${this.openDuration}ms`),this.dom.accordion.style.setProperty(`--${this.prefix}accordion-close-transition-duration`,`${this.closeDuration}ms`)}focusCurrentChild(){this.currentChild!==-1&&this.currentAccordionItem.focus()}focusChild(t){this.blurCurrentChild(),this.currentChild=t,this.focusCurrentChild()}focusFirstChild(){this.focusChild(0)}focusLastChild(){this.focusChild(this.elements.accordionItems.length-1)}focusNextChild(){this.currentChild<this.elements.accordionItems.length-1?this.focusChild(this.currentChild+1):this.focusCurrentChild()}focusPreviousChild(){this.currentChild>0?this.focusChild(this.currentChild-1):this.focusCurrentChild()}blurCurrentChild(){this.currentChild!==-1&&this.currentAccordionItem.blur()}openChildren(){this.elements.accordionItems.forEach(t=>t.show())}closeChildren(){this.elements.accordionItems.forEach(t=>t.hide())}}module.exports=q;