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

package/dist/js/component/carousel.iife.js

@@ -1,3 +0,0 @@
-var Carousel=function(){"use strict";var K=Object.defineProperty;var R=(u,n,c)=>n in u?K(u,n,{enumerable:!0,configurable:!0,writable:!0,value:c}):u[n]=c;var o=(u,n,c)=>R(u,typeof n!="symbol"?n+"":n,c);function u(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.add(e):t.classList.add(...e))}function n(e,t){e===""||e.length===0||(typeof e=="string"?t.classList.remove(e):t.classList.remove(...e))}function c(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 m(e){e.preventDefault(),e.stopPropagation()}function y(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 d(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],d(r)}}return{status:!0,error:null}}catch(t){return{status:!1,error:t}}}function C(e,t){if(i("string",{tagName:e}).status&&y(HTMLElement,t).status){const s=e.toLowerCase();let r=!0;for(const l in t)t[l].tagName.toLowerCase()!==s&&(r=!1);return r}else return!1}function I(e=null){window.Graupl=window.Graupl||{},i("string",{type:e})&&(window.Graupl[e]=window.Graupl[e]||{})}function b(e=null){return i("string",{type:e})?window.Graupl[e]:window.Graupl}function v(e,t={}){i("string",{type:e})&&i("object",{data:t})&&(window.Graupl[e]=t)}function T(e){i("string",{type:e})&&(window.Graupl[e]={})}function E(e,t,s){i("string",{type:e,key:t})&&(window.Graupl[e][t]=s)}function w(e,t){return i("string",{type:e,key:t})?window.Graupl[e][t]:null}function x(e,t){i("string",{type:e,key:t})&&delete window.Graupl[e][t]}const g={initializeStorage:I,getStorage:b,setStorage:v,clearStorage:T,pushToStorage:E,getFromStorage:w,removeFromStorage:x};class k{constructor({carouselElement:t,carouselItemSelector:s=".carousel-item",carouselItemContainerSelector:r=".carousel-item-container",carouselControlSelector:l=".carousel-control",carouselControlContainerSelector:p=".carousel-control-container",carouselTabSelector:f=".carousel-tab",carouselTabContainerSelector:_=".carousel-tab-container",autoplaySelector:a=".autoplay",nextSelector:A=".next",previousSelector:D=".previous",activeClass:S="active",previousClass:L="previous",nextClass:$="next",playClass:M="play",pauseClass:G="pause",autoplay:O=!0,transitionDelay:j=1e4,transitionDuration:P=500,playText:F="Play",pauseText:V="Pause",prefix:q="graupl-",key:H=null,initialize:z=!1}){o(this,"_dom",{carousel:null,carouselItems:[],carouselItemContainer:null,carouselControls:[],carouselControlContainer:null,carouselTabs:[],carouselTabContainer:null,autoplay:null,next:null,previous:null});o(this,"_selectors",{carouselItems:"",carouselItemContainer:"",carouselControls:"",carouselControlContainer:"",carouselTabs:"",carouselTabContainer:"",autoplay:"",next:"",previous:""});o(this,"_activeClass","active");o(this,"_previousClass","previous");o(this,"_nextClass","next");o(this,"_playClass","play");o(this,"_pauseClass","pause");o(this,"_currentItem",0);o(this,"_autoplay",!0);o(this,"_transitionDelay",1e4);o(this,"_transitionDuration",500);o(this,"_playText","Play");o(this,"_pauseText","Pause");o(this,"_currentAction","next");o(this,"_autoplayInterval",null);o(this,"_prefix","graupl-");o(this,"_key","");o(this,"_errors",[]);this._dom.carousel=t,this._selectors.carouselItems=s,this._selectors.carouselItemContainer=r,this._selectors.carouselControls=l,this._selectors.carouselControlContainer=p,this._selectors.carouselTabs=f,this._selectors.carouselTabContainer=_,this._selectors.autoplay=a,this._selectors.next=A,this._selectors.previous=D,this._activeClass=S||"",this._previousClass=L||"",this._nextClass=$||"",this._playClass=M||"",this._pauseClass=G||"",this._autoplay=O,this._transitionDelay=j,this._transitionDuration=P,this._playText=F||"",this._pauseText=V||"",this._prefix=q||"",this._key=H||"",z&&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(),g.initializeStorage("carousels"),g.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,l)=>{r.setAttribute("aria-selected",l===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=y(HTMLElement,{carousel:this.dom.carousel});s||(this._errors.push(s.message),t=!1);const r=d({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 l=i("boolean",{autoplay:this.autoplay});l||(this._errors.push(l.message),t=!1);const p=i("number",{transitionDelay:this._transitionDelay});p||(this._errors.push(p.message),t=!1);const f=i("number",{transitionDuration:this._transitionDuration});if(f||(this._errors.push(f.message),t=!1),this._activeClass!==""){const a=h({activeClass:this._activeClass});a||(this._errors.push(a.message),t=!1)}if(this._previousClass!==""){const a=h({previousClass:this._previousClass});a||(this._errors.push(a.message),t=!1)}if(this._nextClass!==""){const a=h({nextClass:this._nextClass});a||(this._errors.push(a.message),t=!1)}if(this._playClass!==""){const a=h({playClass:this._playClass});a||(this._errors.push(a.message),t=!1)}if(this._pauseClass!==""){const a=h({pauseClass:this._pauseClass});a||(this._errors.push(a.message),t=!1)}if(this._playText!==""){const a=i("string",{playText:this._playText});a||(this._errors.push(a.message),t=!1)}if(this._pauseText!==""){const a=i("string",{pauseText:this._pauseText});a||(this._errors.push(a.message),t=!1)}const _=i("string",{prefix:this._prefix});return _||(this._errors.push(_.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&&y(HTMLElement,{base:s}),Array.isArray(this._dom[t])){const p=Array.from(s.querySelectorAll(this.selectors[t])).filter(f=>f.parentElement===s);r?this._dom[t]=p:this._dom[t]=[...this._dom[t],...p]}else{const l=s.querySelector(this.selectors[t]);if(l&&l.parentElement!==s)return;r&&(this._dom[t]=l)}}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(){!C("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)=>{C("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),n(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),n(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(c(s)){case"Space":case"Enter":m(s);break}})}),this.dom.carouselTabs.forEach(t=>{t.addEventListener("keydown",s=>{switch(c(s)){case"Space":case"Enter":m(s);break}})})}_handleKeyup(){this.dom.next.addEventListener("keyup",t=>{switch(c(t)){case"Space":case"Enter":this.activateNextItem(),m(t);break}}),this.dom.previous.addEventListener("keyup",t=>{switch(c(t)){case"Space":case"Enter":this.activatePreviousItem(),m(t);break}}),this.dom.autoplay.addEventListener("keyup",t=>{switch(c(t)){case"Space":case"Enter":this.toggleAutoplay(),m(t);break}}),this.dom.carouselTabs.forEach((t,s)=>{t.addEventListener("keyup",r=>{switch(c(r)){case"Space":case"Enter":this.activateItem(s),m(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(){n(this.activeClass,this.currentCarouselItem),this.currentCarouselTab&&(this.currentCarouselTab.setAttribute("aria-selected",!1),n(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(()=>{n(this.previousClass,this.dom.carouselItems[s]),n(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 k}();

package/src/scss/base/button/_index.scss

@@ -1,107 +0,0 @@
-// @graupl/graupl button base styles.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../link/defaults" as link-defaults;
-@use "../../base/link/variables" as link;
-@use "variables" as *;
-@use "mixins" as *;
-@use "../../mixins/layer" as *;
-
-#{defaults.$button-selector} {
-  @include apply-button;
-
-  &#{defaults.$button-link-selector} {
-    --#{root-defaults.$prefix}button-padding: #{link.$link-padding};
-    --#{root-defaults.$prefix}button-transition: #{link.$link-transition};
-    --#{root-defaults.$prefix}button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
-    --#{root-defaults.$prefix}button-transform: #{link.$link-transform};
-    --#{root-defaults.$prefix}button-visited-transform: #{link.$link-visited-transform};
-    --#{root-defaults.$prefix}button-focus-transform: #{link.$link-transform};
-    --#{root-defaults.$prefix}button-hover-transform: #{link.$link-hover-transform};
-    --#{root-defaults.$prefix}button-active-transform: #{link.$link-active-transform};
-    --#{root-defaults.$prefix}button-border-width: #{link.$link-border-width};
-    --#{root-defaults.$prefix}button-border-style: #{link.$link-border-style};
-    --#{root-defaults.$prefix}button-border-radius: #{link.$link-border-radius};
-    --#{root-defaults.$prefix}button-min-width: #{link.$link-min-width};
-    --#{root-defaults.$prefix}button-min-height: #{link.$link-min-height};
-    --#{root-defaults.$prefix}button-font-size: inherit;
-
-    text-decoration: link.$link-text-decoration;
-    text-decoration-thickness: link.$link-text-decoration-thickness;
-    text-decoration-style: link.$link-text-decoration-style;
-  }
-}
-
-@include layer(base) {
-  #{defaults.$button-selector}#{defaults.$button-link-selector} {
-    --#{root-defaults.$prefix}button-color: #{link.$link-color};
-    --#{root-defaults.$prefix}button-visited-color: #{link.$link-visited-color};
-    --#{root-defaults.$prefix}button-focus-color: #{link.$link-focus-color};
-    --#{root-defaults.$prefix}button-hover-color: #{link.$link-hover-color};
-    --#{root-defaults.$prefix}button-active-color: #{link.$link-active-color};
-    --#{root-defaults.$prefix}button-disabled-color: #{link.$link-disabled-color};
-    --#{root-defaults.$prefix}button-background: #{link.$link-background};
-    --#{root-defaults.$prefix}button-visited-background: #{link.$link-visited-background};
-    --#{root-defaults.$prefix}button-focus-background: #{link.$link-focus-background};
-    --#{root-defaults.$prefix}button-hover-background: #{link.$link-hover-background};
-    --#{root-defaults.$prefix}button-active-background: #{link.$link-active-background};
-    --#{root-defaults.$prefix}button-disabled-background: #{link.$link-disabled-background};
-    --#{root-defaults.$prefix}button-border-color: #{link.$link-border-color};
-    --#{root-defaults.$prefix}button-visited-border-color: #{link.$link-visited-border-color};
-    --#{root-defaults.$prefix}button-focus-border-color: #{link.$link-focus-border-color};
-    --#{root-defaults.$prefix}button-hover-border-color: #{link.$link-hover-border-color};
-    --#{root-defaults.$prefix}button-active-border-color: #{link.$link-active-border-color};
-    --#{root-defaults.$prefix}button-disabled-border-color: #{link.$link-disabled-border-color};
-  }
-
-  #{link-defaults.$link-selector} {
-    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}link-padding: #{$button-padding};
-      --#{root-defaults.$prefix}link-transition: #{$button-transition};
-      --#{root-defaults.$prefix}link-transition-reduced-motion: #{$button-transition-reduced-motion};
-      --#{root-defaults.$prefix}link-transform: #{$button-transform};
-      --#{root-defaults.$prefix}link-visited-transform: #{$button-visited-transform};
-      --#{root-defaults.$prefix}link-focus-transform: #{$button-focus-transform};
-      --#{root-defaults.$prefix}link-hover-transform: #{$button-hover-transform};
-      --#{root-defaults.$prefix}link-active-transform: #{$button-active-transform};
-      --#{root-defaults.$prefix}link-disabled-transform: #{$button-disabled-transform};
-      --#{root-defaults.$prefix}link-border-width: #{$button-border-width};
-      --#{root-defaults.$prefix}link-border-style: #{$button-border-style};
-      --#{root-defaults.$prefix}link-border-radius: #{$button-border-radius};
-      --#{root-defaults.$prefix}link-min-width: #{$button-min-width};
-      --#{root-defaults.$prefix}link-min-height: #{$button-min-height};
-      --#{root-defaults.$prefix}link-text-decoration: none;
-      --#{root-defaults.$prefix}link-visited-text-decoration: none;
-      --#{root-defaults.$prefix}link-focus-text-decoration: none;
-      --#{root-defaults.$prefix}link-hover-text-decoration: none;
-      --#{root-defaults.$prefix}link-active-text-decoration: none;
-      --#{root-defaults.$prefix}link-disabled-text-decoration: none;
-    }
-  }
-}
-
-@include layer(theme) {
-  #{link-defaults.$link-selector} {
-    &#{defaults.$button-selector}:not(#{defaults.$button-link-selector}) {
-      --#{root-defaults.$prefix}link-color: #{$button-color};
-      --#{root-defaults.$prefix}link-visited-color: #{$button-visited-color};
-      --#{root-defaults.$prefix}link-focus-color: #{$button-focus-color};
-      --#{root-defaults.$prefix}link-hover-color: #{$button-hover-color};
-      --#{root-defaults.$prefix}link-active-color: #{$button-active-color};
-      --#{root-defaults.$prefix}link-disabled-color: #{$button-disabled-color};
-      --#{root-defaults.$prefix}link-background: #{$button-background};
-      --#{root-defaults.$prefix}link-visited-background: #{$button-visited-background};
-      --#{root-defaults.$prefix}link-focus-background: #{$button-focus-background};
-      --#{root-defaults.$prefix}link-hover-background: #{$button-hover-background};
-      --#{root-defaults.$prefix}link-active-background: #{$button-active-background};
-      --#{root-defaults.$prefix}link-disabled-background: #{$button-disabled-background};
-      --#{root-defaults.$prefix}link-border-color: #{$button-border-color};
-      --#{root-defaults.$prefix}link-visited-border-color: #{$button-visited-border-color};
-      --#{root-defaults.$prefix}link-focus-border-color: #{$button-focus-border-color};
-      --#{root-defaults.$prefix}link-hover-border-color: #{$button-hover-border-color};
-      --#{root-defaults.$prefix}link-active-border-color: #{$button-active-border-color};
-      --#{root-defaults.$prefix}link-disabled-border-color: #{$button-disabled-border-color};
-    }
-  }
-}

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

@@ -1,166 +0,0 @@
-// @graupl/graupl button base styles.
-
-@use "defaults";
-@use "../../defaults" as root-defaults;
-@use "../../theme/color/variables" as color;
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-@use "../../mixins/animation";
-@use "../../functions/theme";
-@use "sass:map";
-
-@mixin apply-button(
-  $min-width: $button-min-width,
-  $min-height: $button-min-height,
-  $padding: $button-padding,
-  $transform: $button-transform,
-  $transition: $button-transition,
-  $border: $button-border,
-  $border-radius: $button-border-radius,
-  $font-size: $button-font-size,
-  $visited-transform: $button-visited-transform,
-  $focus-transform: $button-focus-transform,
-  $hover-transform: $button-hover-transform,
-  $active-transform: $button-active-transform,
-  $disabled-transform: $button-disabled-transform,
-  $border-color: $button-border-color,
-  $background: $button-background,
-  $color: $button-color,
-  $visited-border-color: $button-visited-border-color,
-  $visited-background: $button-visited-background,
-  $visited-color: $button-visited-color,
-  $focus-border-color: $button-focus-border-color,
-  $focus-background: $button-focus-background,
-  $focus-color: $button-focus-color,
-  $hover-border-color: $button-hover-border-color,
-  $hover-background: $button-hover-background,
-  $hover-color: $button-hover-color,
-  $active-border-color: $button-active-border-color,
-  $active-background: $button-active-background,
-  $active-color: $button-active-color,
-  $disabled-border-color: $button-disabled-border-color,
-  $disabled-background: $button-disabled-background,
-  $disabled-color: $button-disabled-color
-) {
-  @include layer(base) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: $min-width;
-    min-height: $min-height;
-    padding: $padding;
-    transform: $transform;
-    transition: $transition;
-    border: $border;
-    border-radius: $border-radius;
-    font-size: $font-size;
-    cursor: pointer;
-
-    @each $selector in map.get(root-defaults.$state-selectors, visited) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$visited-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, focus) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$focus-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, hover) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$hover-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, active) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-transform: #{$active-transform};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
-      &#{$selector} {
-        @each $state, $selectors in root-defaults.$state-selectors {
-          @each $selector in $selectors {
-            &,
-            &#{$selector} {
-              --#{root-defaults.$prefix}button-transform: #{$disabled-transform};
-
-              cursor: not-allowed;
-            }
-          }
-        }
-      }
-    }
-
-    @include animation.off {
-      --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};
-    }
-  }
-
-  @include layer(theme) {
-    border-color: $border-color;
-    background: $background;
-    color: $color;
-
-    @each $color, $map in map.get(color.$themes, active) {
-      &#{defaults.$button-theme-selector-prefix}#{$color} {
-        @each $prop, $shade in defaults.$button-state-theme-map {
-          --#{root-defaults.$prefix}button-#{$prop}: #{theme.get(
-              $color,
-              $shade
-            )};
-        }
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, visited) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$visited-border-color};
-        --#{root-defaults.$prefix}button-background: #{$visited-background};
-        --#{root-defaults.$prefix}button-color: #{$visited-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, focus) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$focus-border-color};
-        --#{root-defaults.$prefix}button-background: #{$focus-background};
-        --#{root-defaults.$prefix}button-color: #{$focus-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, hover) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$hover-border-color};
-        --#{root-defaults.$prefix}button-background: #{$hover-background};
-        --#{root-defaults.$prefix}button-color: #{$hover-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, active) {
-      &#{$selector} {
-        --#{root-defaults.$prefix}button-border-color: #{$active-border-color};
-        --#{root-defaults.$prefix}button-background: #{$active-background};
-        --#{root-defaults.$prefix}button-color: #{$active-color};
-      }
-    }
-
-    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
-      &#{$selector} {
-        @each $state, $selectors in root-defaults.$state-selectors {
-          @each $selector in $selectors {
-            &,
-            &#{$selector} {
-              --#{root-defaults.$prefix}button-border-color: #{$disabled-border-color};
-              --#{root-defaults.$prefix}button-background: #{$disabled-background};
-              --#{root-defaults.$prefix}button-color: #{$disabled-color};
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/scss/base/form/_index.scss

@@ -1,93 +0,0 @@
-// @graupl/graupl form base styles.
-
-@use "defaults";
-@use "variables" as *;
-@use "../../mixins/layer" as *;
-
-@include layer(base) {
-  #{defaults.$input-selector},
-  #{defaults.$textarea-selector},
-  #{defaults.$select-selector} {
-    padding: $input-padding;
-    border: $input-border;
-    border-radius: $input-border-radius;
-    font-size: $input-font-size;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  #{defaults.$label-selector} {
-    font-size: $label-font-size;
-  }
-
-  #{defaults.$fieldset-selector} {
-    display: flex;
-    flex-flow: $fieldset-direction wrap;
-    gap: $fieldset-gap;
-    padding: $fieldset-padding;
-    border: $fieldset-border;
-    border-radius: $fieldset-border-radius;
-    font-size: $fieldset-font-size;
-
-    &:disabled {
-      #{defaults.$input-selector},
-      #{defaults.$textarea-selector},
-      #{defaults.$select-selector} {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-@include layer(theme) {
-  #{defaults.$input-selector},
-  #{defaults.$textarea-selector},
-  #{defaults.$select-selector} {
-    border-color: $input-border-color;
-    background: $input-background;
-    color: $input-color;
-    accent-color: $input-accent-color;
-
-    &::placeholder {
-      color: $input-placeholder-color;
-    }
-
-    &:disabled {
-      border-color: $input-disabled-border-color;
-      color: $input-disabled-color;
-
-      &::placeholder {
-        color: $input-disabled-placeholder-color;
-      }
-    }
-  }
-
-  #{defaults.$label-selector} {
-    color: $label-color;
-
-    &:has(
-        + #{defaults.$input-selector}:disabled,
-        + #{defaults.$textarea-selector}:disabled,
-        + #{defaults.$select-selector}:disabled
-      ) {
-      color: $label-disabled-color;
-    }
-  }
-
-  #{defaults.$fieldset-selector} {
-    border-color: $fieldset-border-color;
-    background: $fieldset-background;
-    color: $fieldset-color;
-
-    &:disabled {
-      border-color: $fieldset-disabled-border-color;
-      color: $fieldset-disabled-color;
-
-      #{defaults.$label-selector} {
-        color: $label-disabled-color;
-      }
-    }
-  }
-}

package/src/scss/base/form/_variables.scss

@@ -1,153 +0,0 @@
-// @graupl/graupl form base variables.
-//
-// These values are to be used to directly style bases and provide a
-// cleaner way to reference custom properties.
-
-@use "defaults";
-@use "../../variables" as root-variables;
-@use "../../defaults" as root-defaults;
-@use "../../theme/typography/variables" as typography;
-@use "../../theme/color//variables" as color;
-@use "../../functions/theme";
-@use "sass:map";
-
-$input-padding-x: var(
-  --#{root-defaults.$prefix}input-padding-x,
-  #{map.get(root-variables.$spacers, 5)}
-);
-$input-padding-y: var(
-  --#{root-defaults.$prefix}input-padding-y,
-  #{map.get(root-variables.$spacers, 3)}
-);
-$input-padding: var(
-  --#{root-defaults.$prefix}input-padding,
-  #{$input-padding-y} #{$input-padding-x}
-);
-$input-font-size: var(
-  --#{root-defaults.$prefix}input-font-size,
-  #{map.get(typography.$font-sizes, base)}
-);
-$label-font-size: var(
-  --#{root-defaults.$prefix}label-font-size,
-  #{$input-font-size}
-);
-$fieldset-direction: var(
-  --#{root-defaults.$prefix}fieldset-direction,
-  #{defaults.$fieldset-direction}
-);
-$fieldset-gap: var(
-  --#{root-defaults.$prefix}fieldset-gap,
-  map.get(root-variables.$spacers, 2)
-);
-$fieldset-padding-x: var(
-  --#{root-defaults.$prefix}fieldset-padding-x,
-  #{$input-padding-x}
-);
-$fieldset-padding-y: var(
-  --#{root-defaults.$prefix}fieldset-padding-y,
-  #{$input-padding-y}
-);
-$fieldset-padding: var(
-  --#{root-defaults.$prefix}fieldset-padding,
-  #{$fieldset-padding-y} #{$fieldset-padding-x}
-);
-$fieldset-font-size: var(
-  --#{root-defaults.$prefix}fieldset-font-size,
-  #{$input-font-size}
-);
-
-// Background properties.
-$input-background: var(
-  --#{root-defaults.$prefix}input-background,
-  #{color.$root-background}
-);
-$fieldset-background: var(
-  --#{root-defaults.$prefix}fieldset-background,
-  #{$input-background}
-);
-
-// Text properties.
-$input-color: var(
-  --#{root-defaults.$prefix}input-color,
-  #{theme.get(primary, 900)}
-);
-$input-placeholder-color: var(
-  --#{root-defaults.$prefix}input-placeholder-color,
-  #{theme.get(secondary, 600)}
-);
-$label-color: var(--#{root-defaults.$prefix}label-color, #{$input-color});
-$fieldset-color: var(--#{root-defaults.$prefix}fieldset-color, #{$input-color});
-$input-disabled-color: var(
-  --#{root-defaults.$prefix}input-disabled-color,
-  #{theme.get(secondary, 400)}
-);
-$input-disabled-placeholder-color: var(
-  --#{root-defaults.$prefix}input-disabled-placeholder-color,
-  #{$input-disabled-color}
-);
-$label-disabled-color: var(
-  --#{root-defaults.$prefix}label-disabled-color,
-  #{$input-disabled-color}
-);
-$fieldset-disabled-color: var(
-  --#{root-defaults.$prefix}fieldset-disabled-color,
-  #{$input-disabled-color}
-);
-
-// Border properties.
-$input-border-width: var(
-  --#{root-defaults.$prefix}input-border-width,
-  #{root-variables.$border-width}
-);
-$input-border-style: var(
-  --#{root-defaults.$prefix}botton-border-style,
-  #{root-variables.$border-style}
-);
-$input-border: var(
-  --#{root-defaults.$prefix}input-border,
-  #{$input-border-width} #{$input-border-style}
-);
-$input-border-radius: var(
-  --#{root-defaults.$prefix}input-border-radius,
-  #{root-variables.$border-radius}
-);
-$fieldset-border-width: var(
-  --#{root-defaults.$prefix}fieldset-border-width,
-  #{$input-border-width}
-);
-$fieldset-border-style: var(
-  --#{root-defaults.$prefix}fieldset-border-style,
-  #{$input-border-style}
-);
-$fieldset-border: var(
-  --#{root-defaults.$prefix}fieldset-border,
-  #{$fieldset-border-width} #{$fieldset-border-style}
-);
-$fieldset-border-radius: var(
-  --#{root-defaults.$prefix}fieldset-border-radius,
-  #{$input-border-radius}
-);
-
-// Border colour properties.
-$input-border-color: var(
-  --#{root-defaults.$prefix}input-border-color,
-  #{theme.get(secondary, 700)}
-);
-$input-disabled-border-color: var(
-  --#{root-defaults.$prefix}input-disabled-border-color,
-  #{theme.get(secondary, 200)}
-);
-$fieldset-border-color: var(
-  --#{root-defaults.$prefix}fieldset-border-color,
-  #{$input-border-color}
-);
-$fieldset-disabled-border-color: var(
-  --#{root-defaults.$prefix}fieldset-disabled-border-color,
-  #{$input-disabled-border-color}
-);
-
-// Accent color properties.
-$input-accent-color: var(
-  --#{root-defaults.$prefix}input-accent-color,
-  #{theme.get(primary, 700)}
-);

package/src/scss/base/link/_defaults.scss

@@ -1,50 +0,0 @@
-// @graupl/graupl link base default values.
-//
-// Generally, these should not be used directly when styling bases 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.
-
-// Link selectors.
-$link-selector: "a" !default;
-$stretched-link-selector: ".stretched" !default;
-$stretched-link-pseudo-selector: "before" !default;
-
-// Link properties.
-$link-text-decoration: underline !default;
-$link-visited-text-decoration: $link-text-decoration !default;
-$link-active-text-decoration: $link-text-decoration !default;
-$link-hover-text-decoration: $link-text-decoration !default;
-$link-focus-text-decoration: $link-text-decoration !default;
-$link-disabled-text-decoration: $link-text-decoration !default;
-$link-text-decoration-style: solid !default;
-$link-visited-text-decoration-style: $link-text-decoration-style !default;
-$link-active-text-decoration-style: $link-text-decoration-style !default;
-$link-hover-text-decoration-style: $link-text-decoration-style !default;
-$link-focus-text-decoration-style: $link-text-decoration-style !default;
-$link-disabled-text-decoration-style: $link-text-decoration-style !default;
-$link-transform: none !default;
-$link-visited-transform: $link-transform !default;
-$link-focus-transform: $link-transform !default;
-$link-hover-transform: $link-transform !default;
-$link-active-transform: $link-transform !default;
-$link-disabled-transform: $link-transform !default;
-$link-border-width: 0 !default;
-$link-border-color: transparent !default;
-$link-visited-border-color: $link-border-color !default;
-$link-focus-border-color: $link-border-color !default;
-$link-hover-border-color: $link-border-color !default;
-$link-active-border-color: $link-border-color !default;
-$link-disabled-border-color: $link-border-color !default;
-$link-background: transparent !default;
-$link-visited-background: $link-background !default;
-$link-focus-background: $link-background !default;
-$link-hover-background: $link-background !default;
-$link-active-background: $link-background !default;
-$link-disabled-background: $link-background !default;
-$link-min-width: auto;
-$link-min-height: auto;
-
-// Stretched link properties.
-$stretched-link-z-index: 5 !default;