@graupl/graupl 1.0.0-alpha.15 → 1.0.0-alpha.16

package/dist/js/graupl.iife.js

@@ -0,0 +1,5 @@
+var Graupl=function(){"use strict";var R=Object.defineProperty;var U=(d,i,p)=>i in d?R(d,i,{enumerable:!0,configurable:!0,writable:!0,value:p}):d[i]=p;var a=(d,i,p)=>U(d,typeof i!="symbol"?i+"":i,p);function d(e,t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Elements given to isValidInstance() must be inside of an object. "${s}" given.`)}for(const s in t)if(!(t[s]instanceof e)){const r=typeof t[s];throw new TypeError(`${s} must be an instance of ${e.name}. "${r}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function i(e,t){try{if(typeof t!="object"){const s=typeof t;throw new TypeError(`Values given to isValidType() must be inside of an object. "${s}" given.`)}for(const s in t){const r=typeof t[s];if(r!==e)throw new TypeError(`${s} must be a ${e}. "${r}" given.`)}return{status:!0,error:null}}catch(s){return{status:!1,error:s}}}function p(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 h(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 s=typeof e[t];if(s!=="string")if(Array.isArray(e[t]))e[t].forEach(r=>{if(typeof r!="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. "${s}" given.`);else{const r={};r[t]=e[t],p(r)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function w(e,t){if(i("string",{tagName:e}).status&&d(HTMLElement,t).status){const s=e.toLowerCase();let r=!0;for(const n in t)t[n].tagName.toLowerCase()!==s&&(r=!1);return r}else return!1}function u(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.add(e):t.classList.add(...e))}function c(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.remove(e):t.classList.remove(...e))}function m(e){try{const t=e.key||e.keyCode,s={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(s).find(r=>s[r]===!0)||""}catch{return""}}function f(e){e.preventDefault(),e.stopPropagation()}function b(e=null){window.Graupl=window.Graupl||{},i("string",{type:e})&&(window.Graupl[e]=window.Graupl[e]||{})}function E(e=null){return i("string",{type:e})?window.Graupl[e]:window.Graupl}function T(e,t={}){i("string",{type:e})&&i("object",{data:t})&&(window.Graupl[e]=t)}function I(e){i("string",{type:e})&&(window.Graupl[e]={})}function k(e,t,s){i("string",{type:e,key:t})&&(window.Graupl[e][t]=s)}function v(e,t){return i("string",{type:e,key:t})?window.Graupl[e][t]:null}function A(e,t){i("string",{type:e,key:t})&&delete window.Graupl[e][t]}const y={initializeStorage:b,getStorage:E,setStorage:T,clearStorage:I,pushToStorage:k,getFromStorage:v,removeFromStorage:A};class x{constructor({alertElement:t,controllerElement:s=null,showClass:r="show",hideClass:n="hide",transitionClass:l="transitioning",transitionTimer:_=150,isHidden:C=!1,key:o=null,initialize:g=!1}){a(this,"_dom",{alert:null,controller:null});a(this,"_hidden",!1);a(this,"_showClass","");a(this,"_hideClass","");a(this,"_transitionClass","");a(this,"_transitionTimer",150);a(this,"_key","");a(this,"_errors",[]);a(this,"_showEvent",new CustomEvent("grauplAlertShow",{bubbles:!0,detail:{alert:this}}));a(this,"_hideEvent",new CustomEvent("grauplAlertHide",{bubbles:!0,detail:{alert:this}}));this._dom.alert=t,this._dom.controller=s,this._showClass=r||"",this._hideClass=n||"",this._transitionClass=l||"",this._transitionTimer=_,this._hidden=C,this._key=o||"",g&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Alert: cannot initialize alert. The following errors have been found:
+ - ${this.errors.join(`
+ - `)}`);this._generateKey(),this._setIds(),this._handleClick(),this._handleKeydown(),this._handleKeyup(),y.initializeStorage("alerts"),y.pushToStorage("alerts",this.dom.alert.id,this)}catch(t){console.error(t)}}get dom(){return this._dom}get showClass(){return this._showClass}get hideClass(){return this._hideClass}get transitionClass(){return this._transitionClass}get transitionTimer(){return this._transitionTimer}get key(){return this._key}set showClass(t){h({showClass:t}),this._showClass!==t&&(this._showClass=t)}set hideClass(t){h({hideClass:t}),this._hideClass!==t&&(this._hideClass=t)}set transitionClass(t){h({transitionClass:t}),this._transitionClass!==t&&(this._transitionClass=t)}set transitionTimer(t){i("number",{transitionTimer:t}),this._transitionTimer!==t&&(this._transitionTimer=t)}set key(t){i("string",{value:t}),this._key!==t&&(this._key=t)}_validate(){let t=!0,s;if(this._dom.controller!==null?s=d(HTMLElement,{alertElement:this._dom.alert,controllerElement:this._dom.controller}):s=d(HTMLElement,{alertElement:this._dom.alert}),s.status||(this._errors.push(s.message),t=!1),this._showClass!==""){const l=h({showClass:this._showClass});l.status||(this._errors.push(l.message),t=!1)}if(this._hideClass!==""){const l=h({hideClass:this._hideClass});l.status||(this._errors.push(l.message),t=!1)}if(this._transitionClass!==""){const l=h({transitionClass:this._transitionClass});l.status||(this._errors.push(l.message),t=!1)}const r=i("number",{transitionTimer:this._transitionTimer});r.status||(this._errors.push(r.message),t=!1);const n=i("boolean",{isHidden:this._hidden});return n.status||(this._errors.push(n.message),t=!1),t}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.alert.id=this.dom.alert.id||`alert-${this.key}`,this.dom.controller.id=this.dom.controller.id||`alert-controller-${this.key}`}show(t=!0){this._hidden&&(this.transitionClass!==""?(u(this.transitionClass,this.dom.alert),requestAnimationFrame(()=>{this.hideClass!==""&&c(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{this.showClass!==""&&u(this.showClass,this.dom.alert),requestAnimationFrame(()=>{c(this.transitionClass,this.dom.alert)})})})):(this.showClass!==""&&u(this.showClass,this.dom.alert),this.hideClass!==""&&c(this.hideClass,this.dom.alert)),this._hidden=!1,t&&this.dom.alert.dispatchEvent(this._hideEvent))}hide(t=!0){this._hidden||(this.transitionClass!==""?(u(this.transitionClass,this.dom.alert),requestAnimationFrame(()=>{this.showClass!==""&&c(this.showClass,this.dom.alert),requestAnimationFrame(()=>{this.transitionTimer>0?setTimeout(()=>{this.hideClass!==""&&u(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{c(this.transitionClass,this.dom.alert)})},this.transitionTimer):(this.hideClass!==""&&u(this.hideClass,this.dom.alert),requestAnimationFrame(()=>{c(this.transitionClass,this.dom.alert)}))})})):(this.hideClass!==""&&u(this.hideClass,this.dom.alert),this.showClass!==""&&c(this.showClass,this.dom.alert)),this._hidden=!0,t&&this.dom.alert.dispatchEvent(this._hideEvent))}_handleClick(){this.dom.controller!==null&&this.dom.controller.addEventListener("pointerup",()=>this.hide())}_handleKeydown(){this.dom.controller!==null&&this.dom.controller.addEventListener("keydown",t=>{const s=m(t);(s==="Space"||s==="Enter")&&f(t)})}_handleKeyup(){this.dom.controller!==null&&this.dom.controller.addEventListener("keyup",t=>{const s=m(t);(s==="Space"||s==="Enter")&&this.hide()})}}class D{constructor({carouselElement:t,carouselItemSelector:s=".carousel-item",carouselItemContainerSelector:r=".carousel-item-container",carouselControlSelector:n=".carousel-control",carouselControlContainerSelector:l=".carousel-control-container",carouselTabSelector:_=".carousel-tab",carouselTabContainerSelector:C=".carousel-tab-container",autoplaySelector:o=".autoplay",nextSelector:g=".next",previousSelector:S=".previous",activeClass:L="active",previousClass:$="previous",nextClass:M="next",playClass:G="play",pauseClass:F="pause",autoplay:O=!0,transitionDelay:q=1e4,transitionDuration:j=500,playText:K="Play",pauseText:z="Pause",prefix:H="graupl-",key:P=null,initialize:V=!1}){a(this,"_dom",{carousel:null,carouselItems:[],carouselItemContainer:null,carouselControls:[],carouselControlContainer:null,carouselTabs:[],carouselTabContainer:null,autoplay:null,next:null,previous:null});a(this,"_selectors",{carouselItems:"",carouselItemContainer:"",carouselControls:"",carouselControlContainer:"",carouselTabs:"",carouselTabContainer:"",autoplay:"",next:"",previous:""});a(this,"_activeClass","active");a(this,"_previousClass","previous");a(this,"_nextClass","next");a(this,"_playClass","play");a(this,"_pauseClass","pause");a(this,"_currentItem",0);a(this,"_autoplay",!0);a(this,"_transitionDelay",1e4);a(this,"_transitionDuration",500);a(this,"_playText","Play");a(this,"_pauseText","Pause");a(this,"_currentAction","next");a(this,"_autoplayInterval",null);a(this,"_prefix","graupl-");a(this,"_key","");a(this,"_errors",[]);this._dom.carousel=t,this._selectors.carouselItems=s,this._selectors.carouselItemContainer=r,this._selectors.carouselControls=n,this._selectors.carouselControlContainer=l,this._selectors.carouselTabs=_,this._selectors.carouselTabContainer=C,this._selectors.autoplay=o,this._selectors.next=g,this._selectors.previous=S,this._activeClass=L||"",this._previousClass=$||"",this._nextClass=M||"",this._playClass=G||"",this._pauseClass=F||"",this._autoplay=O,this._transitionDelay=q,this._transitionDuration=j,this._playText=K||"",this._pauseText=z||"",this._prefix=H||"",this._key=P||"",V&&this.initialize()}initialize(){try{if(!this._validate())throw new Error(`Graupl Carousel: cannot initialize carousel. The following errors have been found:
+ - ${this.errors.join(`
+ - `)}`);this._generateKey(),this._setDOMElements(),this._setIds(),this._setAriaAttributes(),this.activateFirstItem(),this._handleAutoplay(),this._handleFocus(),this._handleClick(),this._handleHover(),this._handleKeydown(),this._handleKeyup(),this._setTransitionDuration(),y.initializeStorage("carousels"),y.pushToStorage("carousels",this.dom.carousel.id,this)}catch(t){console.error(t)}}get dom(){return this._dom}get selectors(){return this._selectors}get activeClass(){return this._activeClass}get previousClass(){return this._previousClass}get nextClass(){return this._nextClass}get playClass(){return this._playClass}get pauseClass(){return this._pauseClass}get currentItem(){return this._currentItem}get currentCarouselItem(){return this.dom.carouselItems[this.currentItem]}get currentCarouselTab(){return this.dom.carouselTabs[this.currentItem]}get autoplay(){return this._autoplay}get transitionDelay(){return this._transitionDelay}get transitionDuration(){return this._transitionDuration}get playText(){return this._playText}get pauseText(){return this._pauseText}get prefix(){return this._prefix}get key(){return this._key}get currentAction(){return this._currentAction}get errors(){return this._errors}set currentItem(t){if(i("number",{value:t}),t===this.currentItem)return;t<0?this._currentItem=0:t>=this.dom.carouselItems.length?this._currentItem=this.dom.carouselItems.length-1:this._currentItem=t,this._dom.carousel.querySelectorAll(this.selectors.carouselTab)&&this.dom.carouselItems.forEach((r,n)=>{r.setAttribute("aria-selected",n===this._currentItem)})}set autoplay(t){i("boolean",{value:t}),this._autoplay!==t&&(this._autoplay=t)}set activeClass(t){h({activeClass:t}),this._activeClass!==t&&(this._activeClass=t)}set previousClass(t){h({previousClass:t}),this._previousClass!==t&&(this._previousClass=t)}set nextClass(t){h({nextClass:t}),this._nextClass!==t&&(this._nextClass=t)}set playClass(t){h({playClass:t}),this._playClass!==t&&(this._playClass=t)}set pauseClass(t){h({pauseClass:t}),this._pauseClass!==t&&(this._pauseClass=t)}set transitionDelay(t){i("number",{value:t}),t!==this.transitionDelay&&t>=0&&(this._currentItem=t)}set transitionDuration(t){i("number",{value:t}),this._transitionDuration!==t&&t>=0&&(this._transitionDuration=t,this._setTransitionDuration())}set playText(t){i("string",{value:t}),this._playText!==t&&(this._playText=t)}set pauseText(t){i("string",{value:t}),this._pauseText!==t&&(this._pauseText=t)}set prefix(t){i("string",{value:t}),this._prefix!==t&&(this._prefix=t)}set key(t){i("string",{value:t}),this._key!==t&&(this._key=t)}_validate(){let t=!0;const s=d(HTMLElement,{carousel:this.dom.carousel});s||(this._errors.push(s.message),t=!1);const r=p({carouselItemsSelector:this._selectors.carouselItems,carouselItemContainerSelector:this._selectors.carouselItemContainer,carouselControlsSelector:this._selectors.carouselControls,carouselControlContainerSelector:this._selectors.carouselControlContainer,carouselTabsSelector:this._selectors.carouselTabs,carouselTabContainerSelector:this._selectors.carouselTabContainer,autoplaySelector:this._selectors.autoplay,nextSelector:this._selectors.next,previousSelector:this._selectors.previous});r||(this._errors.push(r.message),t=!1);const n=i("boolean",{autoplay:this.autoplay});n||(this._errors.push(n.message),t=!1);const l=i("number",{transitionDelay:this._transitionDelay});l||(this._errors.push(l.message),t=!1);const _=i("number",{transitionDuration:this._transitionDuration});if(_||(this._errors.push(_.message),t=!1),this._activeClass!==""){const o=h({activeClass:this._activeClass});o||(this._errors.push(o.message),t=!1)}if(this._previousClass!==""){const o=h({previousClass:this._previousClass});o||(this._errors.push(o.message),t=!1)}if(this._nextClass!==""){const o=h({nextClass:this._nextClass});o||(this._errors.push(o.message),t=!1)}if(this._playClass!==""){const o=h({playClass:this._playClass});o||(this._errors.push(o.message),t=!1)}if(this._pauseClass!==""){const o=h({pauseClass:this._pauseClass});o||(this._errors.push(o.message),t=!1)}if(this._playText!==""){const o=i("string",{playText:this._playText});o||(this._errors.push(o.message),t=!1)}if(this._pauseText!==""){const o=i("string",{pauseText:this._pauseText});o||(this._errors.push(o.message),t=!1)}const C=i("string",{prefix:this._prefix});return C||(this._errors.push(C.message),t=!1),t}_setDOMElementType(t,s=this.dom.carousel,r=!0){if(typeof this.selectors[t]=="string"){if(t==="carousel")throw new Error(`Graupl Carousel: "${t}" element cannot be set through _setDOMElementType.`);if(s!==this.dom.carousel&&d(HTMLElement,{base:s}),Array.isArray(this._dom[t])){const l=Array.from(s.querySelectorAll(this.selectors[t])).filter(_=>_.parentElement===s);r?this._dom[t]=l:this._dom[t]=[...this._dom[t],...l]}else{const n=s.querySelector(this.selectors[t]);if(n&&n.parentElement!==s)return;r&&(this._dom[t]=n)}}else throw new Error(`Graupl Carousel: "${t}" is not a valid element type within the carousel.`)}_resetDOMElementType(t){if(typeof this.selectors[t]=="string"){if(t==="carousel")throw new Error(`Graupl Carousel: "${t}" element cannot be reset through _resetDOMElementType.`);Array.isArray(this._dom[t])?this._dom[t]=[]:this._dom[t]=null}else throw new Error(`Graupl Carousel: "${t}" is not a valid element type within the carousel.`)}_setDOMElements(){this._setDOMElementType("carouselItemContainer"),this._setDOMElementType("carouselControlContainer"),this._setDOMElementType("carouselTabContainer"),this.dom.carouselItemContainer&&this._setDOMElementType("carouselItems",this.dom.carouselItemContainer),this.dom.carouselControlContainer&&(this._setDOMElementType("carouselControls",this.dom.carouselControlContainer),this._setDOMElementType("autoplay",this.dom.carouselControlContainer),this._setDOMElementType("next",this.dom.carouselControlContainer),this._setDOMElementType("previous",this.dom.carouselControlContainer)),this._dom.carouselTabContainer&&this._setDOMElementType("carouselTabs",this.dom.carouselTabContainer)}_generateKey(t=!1){(this.key===""||t)&&(this.key=Math.random().toString(36).replace(/[^a-z]+/g,"").substring(0,10))}_setIds(){this.dom.carousel.id=this.dom.carousel.id||`carousel-${this.key}`,this.dom.carouselItems.forEach((t,s)=>{t.id=t.id||`carousel-item-${this.key}-${s}`}),this.dom.carouselTabs.forEach((t,s)=>{t.id=t.id||`carousel-tab-${this.key}-${s}`})}_setAriaAttributes(){!w("section",{carousel:this.dom.carousel})&&!this.dom.carousel.getAttribute("role")!=="region"&&this.dom.carousel.setAttribute("role","group"),this._dom.carousel.setAttribute("aria-roledescription","carousel"),this.dom.carouselTabContainer&&this.dom.carouselTabContainer.setAttribute("role","tablist"),this.dom.carouselTabs.forEach((t,s)=>{w("button",{tab:t})||t.setAttribute("role","button"),t.setAttribute("aria-selected",s===0),t.setAttribute("aria-controls",this.dom.carouselItems[s].id)})}_setInterval(){this._clearInterval(),this._autoplayInterval=setInterval(()=>{this.activateNextItem()},this.transitionDelay)}_clearInterval(){clearInterval(this._autoplayInterval)}_handleAutoplay(){this.autoplay?(u(this.pauseClass,this.dom.autoplay),c(this.playClass,this.dom.autoplay),this.dom.autoplay.setAttribute("aria-label",this.pauseText),this.dom.carousel.setAttribute("aria-live","off"),this._setInterval()):(u(this.playClass,this.dom.autoplay),c(this.pauseClass,this.dom.autoplay),this.dom.autoplay.setAttribute("aria-label",this.playText),this.dom.carousel.setAttribute("aria-live","polite"),this._clearInterval())}_handleFocus(){this.dom.carousel.addEventListener("focusin",()=>{this.autoplay&&this._clearInterval()}),this.dom.carousel.addEventListener("focusout",()=>{this.autoplay&&this._setInterval()})}_handleClick(){this.dom.next.addEventListener("pointerup",()=>{this.activateNextItem()}),this.dom.previous.addEventListener("pointerup",()=>{this.activatePreviousItem()}),this.dom.autoplay.addEventListener("pointerup",()=>{this.toggleAutoplay()}),this.dom.carouselTabs.forEach((t,s)=>{t.addEventListener("pointerup",()=>{this.currentItem>s?this._currentAction="previous":this._currentAction="next",this.activateItem(s)})})}_handleHover(){this.dom.carousel.addEventListener("pointerover",()=>{this.autoplay&&this._clearInterval()}),this.dom.carousel.addEventListener("pointerleave",()=>{this.autoplay&&this._setInterval()})}_handleKeydown(){this.dom.carouselControls.forEach(t=>{t.addEventListener("keydown",s=>{switch(m(s)){case"Space":case"Enter":f(s);break}})}),this.dom.carouselTabs.forEach(t=>{t.addEventListener("keydown",s=>{switch(m(s)){case"Space":case"Enter":f(s);break}})})}_handleKeyup(){this.dom.next.addEventListener("keyup",t=>{switch(m(t)){case"Space":case"Enter":this.activateNextItem(),f(t);break}}),this.dom.previous.addEventListener("keyup",t=>{switch(m(t)){case"Space":case"Enter":this.activatePreviousItem(),f(t);break}}),this.dom.autoplay.addEventListener("keyup",t=>{switch(m(t)){case"Space":case"Enter":this.toggleAutoplay(),f(t);break}}),this.dom.carouselTabs.forEach((t,s)=>{t.addEventListener("keyup",r=>{switch(m(r)){case"Space":case"Enter":this.activateItem(s),f(r);break}})})}_setTransitionDuration(){this.dom.carousel.style.setProperty(`--${this.prefix}carousel-transition-duration`,`${this.transitionDuration}ms`)}activateCurrentItem(){u(this.activeClass,this.currentCarouselItem),this.currentCarouselTab&&(this.currentCarouselTab.setAttribute("aria-selected",!0),u(this.activeClass,this.currentCarouselTab))}deactivateCurrentItem(){c(this.activeClass,this.currentCarouselItem),this.currentCarouselTab&&(this.currentCarouselTab.setAttribute("aria-selected",!1),c(this.activeClass,this.currentCarouselTab))}activateItem(t){const s=this.currentItem;this.dom.carousel.dataset.grauplAction=this._currentAction,this.autoplay&&this._clearInterval(),u(this.previousClass,this.currentCarouselItem),u(this.nextClass,this.dom.carouselItems[t]),requestAnimationFrame(()=>{this.deactivateCurrentItem(),this.currentItem=t,this.activateCurrentItem(),requestAnimationFrame(()=>{setTimeout(()=>{c(this.previousClass,this.dom.carouselItems[s]),c(this.nextClass,this.currentCarouselItem)},this.transitionDuration)})}),this.autoplay&&this._setInterval()}activateFirstItem(){this.activateItem(0)}activateLastItem(){this.activateItem(this.dom.carouselItems.length-1)}activateNextItem(){this._currentAction="next",this.currentItem+1>=this.dom.carouselItems.length?this.activateFirstItem():this.activateItem(this.currentItem+1)}activatePreviousItem(){this._currentAction="previous",this.currentItem-1<0?this.activateLastItem():this.activateItem(this.currentItem-1)}toggleAutoplay(){this.autoplay=!this.autoplay,this._handleAutoplay()}}return{Alert:x,Carousel:D}}();

package/index.html

@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
-  <link rel="stylesheet" href="dist/graupl.css">
+  <link rel="stylesheet" href="dist/css/graupl.css">
 </head>
 
 <body>
@@ -734,6 +734,60 @@
         </div>
       </div>
     </div>
+    <div class="py-10 full-width container">
+      <h2>Accordions</h2>
+      <div class="accordion">
+        <div class="accordion-item show">
+          <div class="accordion-item-header">
+            <h3 class="accordion-item-title">
+              <button aria-expanded="true" class="accordion-item-toggle">Accordion 1</button>
+            </h3>
+          </div>
+          <div class="accordion-item-content">
+            <div class="accordion-item-body">
+              <p>This is the body of the accordion that can expand/collapse based on the state.</p>
+            </div>
+            <div class="accordion-item-footer">
+                <p>This is the footer.</p>
+            </div>
+          </div>
+        </div>
+        <div class="accordion-item hide">
+          <div class="accordion-item-header">
+            <h3 class="accordion-item-title">
+              <button aria-expanded="false" class="accordion-item-toggle">Accordion 2</button>
+            </h3>
+          </div>
+          <div class="accordion-item-content">
+            <div class="accordion-item-body">
+              <p>This is the body of the accordion that can expand/collapse based on the state.</p>
+              <p>This one has some extra text in it to make it longer.</p>
+            </div>
+            <div class="accordion-item-footer">
+                <p>This is the footer.</p>
+                <p>There is more info in the footer too.</p>
+            </div>
+          </div>
+        </div>
+        <div class="accordion-item hide">
+          <div class="accordion-item-header">
+            <h3 class="accordion-item-title">
+              <button aria-expanded="false" class="accordion-item-toggle">Accordion 3</button>
+            </h3>
+          </div>
+          <div class="accordion-item-content">
+            <div class="accordion-item-body">
+              <p>This is the body of the accordion that can expand/collapse based on the state.</p>
+              <p>This one is even longer than the second one. Why? Because it needs to be. That's why.</p>
+              <p>It's also a bit more verbose than the other two.</p>
+              <p>But that's okay. It's just an example.</p>
+            </div>
+            <div class="accordion-item-footer">
+                <p>This is the footer.</p>
+            </div>
+          </div>
+        </div>
+      </div>
     <div class="full-width container min-h-full-screen align-content-center">
       <h2>Carousels</h2>
       <section class="carousel">
@@ -770,8 +824,8 @@
     </div>
   </main>
   <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
-  <script src="src/js/navigation.js"></script>
   <script type="module" src="src/js/alert/index.js"></script>
+  <script type="module" src="src/js/accordion/index.js"></script>
   <script type="module" src="src/js/carousel/index.js"></script>
   <script>
     const preferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

package/index.js

@@ -0,0 +1,12 @@
+import Carousel from "./src/carousel/Carousel.js";
+import Alert from "./src/alert/Alert.js";
+
+const carousel = Carousel;
+const alert = Alert;
+
+export { carousel as Carousel };
+export { alert as Alert };
+export default {
+  Carousel,
+  Alert,
+};

package/package.json

@@ -1,17 +1,31 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-alpha.15",
+  "version": "1.0.0-alpha.16",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {
     ".": {
-      "sass": "./scss/graupl.scss"
+      "sass": "./scss/graupl.scss",
+      "import": "./dist/js/graupl.es.js",
+      "require": "./dist/js/graupl.cjs.js"
     },
     "./*.scss": {
       "sass": "./scss/*.scss"
     },
     "./src/*.scss": {
       "sass": "./src/scss/*.scss"
+    },
+    "./accordion": {
+      "import": "./dist/js/component/accordion.es.js",
+      "require": "./dist/js/component/accordion.cjs.js"
+    },
+    "./alert": {
+      "import": "./dist/js/component/alert.es.js",
+      "require": "./dist/js/component/alert.cjs.js"
+    },
+    "./carousel": {
+      "import": "./dist/js/component/carousel.es.js",
+      "require": "./dist/carousel.cjs.js"
     }
   },
   "scripts": {
@@ -21,9 +35,14 @@
     "prettier": "prettier '**/*.{js,mjs,cjs,scss,sass}'",
     "stylelint": "stylelint '**/*.scss' --allow-empty-input",
     "lint": "npm run eslint -- --fix && npm run stylelint -- --fix && npm run prettier --  --write",
-    "sass": "rm -rf dist && sass scss:dist",
-    "postcss": "postcss 'dist/**/*.css' --replace",
-    "build": "npm run sass && npm run postcss",
+    "sass": "rm -rf dist/css/* && sass scss:dist/css",
+    "postcss": "postcss 'dist/css/**/*.css' --replace",
+    "build": "npm-run-all build:*",
+    "build:css": "npm run sass && npm run postcss",
+    "build:js": "BUILD_TYPE=default vite build",
+    "build:accordion": "BUILD_TYPE=Accordion vite build",
+    "build:alert": "BUILD_TYPE=Alert vite build",
+    "build:carousel": "BUILD_TYPE=Carousel vite build",
     "postbuild": "npm run docs:build",
     "release": "git add dist/. && standard-version -a",
     "prerelease": "npm run lint && npm run build",
@@ -46,6 +65,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@eslint/js": "^9.0.0",
     "autoprefixer": "^10.4.19",
+    "chokidar-cli": "^3.0.0",
     "commitizen": "^4.3.0",
     "cssnano": "^7.0.1",
     "cz-conventional-changelog": "^3.3.0",
@@ -56,6 +76,7 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "normalize.css": "^8.0.1",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-discard-comments": "^7.0.0",

package/scss/component/accordion.scss

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