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

package/src/scss/component/accordion/_index.scss

@@ -0,0 +1,180 @@
+// @graupl/graupl accordion component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../base/button/mixins" as button-mixins;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../state/focus/variables" as focus;
+@use "sass:map";
+
+#{defaults.$accordion-selector} {
+  @include layer(component) {
+    display: flex;
+    flex-flow: column nowrap;
+    padding: $accordion-padding;
+    gap: $accordion-gap;
+
+    > #{defaults.$accordion-item-selector} {
+      &:not(:first-child) {
+        margin-top: calc(-1 * #{$accordion-item-border-width});
+      }
+    }
+  }
+
+  @include layer(theme) {
+    background: $accordion-background;
+    color: $accordion-color;
+  }
+}
+
+#{defaults.$accordion-item-selector} {
+  @include layer(component) {
+    overflow: hidden;
+    transition: $accordion-transition;
+    border: $accordion-item-border;
+    border-radius: $accordion-item-border-radius;
+    isolation: isolate;
+
+    &#{defaults.$accordion-item-close-selector}
+      #{defaults.$accordion-item-content-selector} {
+      display: none;
+    }
+
+    &#{defaults.$accordion-item-open-selector}
+      #{defaults.$accordion-item-content-selector} {
+      transform: $accordion-item-content-open-transform;
+      opacity: 1;
+    }
+
+    &#{defaults.$accordion-item-transition-selector}
+      #{defaults.$accordion-item-content-selector} {
+      display: flex;
+    }
+  }
+
+  @include layer(state) {
+    #{defaults.$accordion-item-toggle-selector} {
+      --#{root-defaults.$prefix}-focus-outline-offset: calc(
+        -1 * (#{$accordion-item-border-width} + #{focus.$focus-width})
+      );
+    }
+  }
+
+  @include layer(theme) {
+    border-color: $accordion-item-border-color;
+  }
+}
+
+#{defaults.$accordion-item-toggle-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    z-index: 2;
+    padding: $accordion-item-toggle-padding;
+    transform: $accordion-item-toggle-transform;
+    transition: $accordion-item-toggle-transition;
+
+    @each $selector in map.get(root-defaults.$state-selectors, visited) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-visited-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, focus) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-focus-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, hover) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-hover-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, active) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-active-transform};
+      }
+    }
+
+    @each $selector in map.get(root-defaults.$state-selectors, disabled) {
+      &#{$selector} {
+        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-disabled-transform};
+      }
+    }
+
+    &#{defaults.$accordion-item-toggle-pseudo-selector} {
+      content: defaults.$accordion-item-toggle-pseudo-content;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: auto;
+      transform: $accordion-item-toggle-pseudo-transform;
+      transition: $accordion-item-toggle-pseudo-transition;
+    }
+
+    &[aria-expanded="true"] {
+      &::after {
+        transform: $accordion-item-toggle-pseudo-open-transform;
+      }
+    }
+  }
+}
+
+#{defaults.$accordion-item-header-selector} {
+  @include layer(component) {
+    margin: $accordion-item-header-margin;
+    padding: $accordion-item-header-padding;
+  }
+}
+
+#{defaults.$accordion-item-title-selector} {
+  @include layer(component) {
+    margin: $accordion-item-title-margin;
+    padding: $accordion-item-title-padding;
+
+    &,
+    #{defaults.$accordion-item-toggle-selector} {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      width: 100%;
+    }
+  }
+
+  @include layer(theme) {
+    &,
+    #{defaults.$accordion-item-toggle-selector} {
+      font-family: $accordion-title-font-family;
+      font-size: $accordion-title-font-size;
+      font-weight: $accordion-title-font-weight;
+      line-height: $accordion-title-line-height;
+    }
+  }
+}
+
+#{defaults.$accordion-item-content-selector} {
+  @include layer(component) {
+    display: flex;
+    flex-flow: column nowrap;
+    padding: $accordion-item-content-padding;
+    transform: $accordion-item-content-transform;
+    transition: $accordion-item-content-transition;
+    opacity: 0;
+    gap: $accordion-item-content-gap;
+  }
+}
+
+#{defaults.$accordion-item-body-selector} {
+  @include layer(component) {
+    padding: $accordion-item-body-padding;
+  }
+}
+
+#{defaults.$accordion-item-footer-selector} {
+  @include layer(component) {
+    padding: $accordion-item-footer-padding;
+  }
+}

package/src/scss/component/accordion/_variables.scss

@@ -0,0 +1,304 @@
+// @graupl/graupl accordion component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../theme/color/variables" as color;
+@use "../../theme/typography/variables" as typography;
+@use "../../functions/theme";
+@use "sass:map";
+@use "../../base/button/variables" as button;
+
+// Accordion properties.
+$accordion-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-padding: var(
+  --#{root-defaults.$prefix}-accordion-padding,
+  #{$accordion-padding-y} #{$accordion-padding-x}
+);
+
+// Accordion gap properties.
+$accordion-column-gap: var(
+  --#{root-defaults.$prefix}-accordion-column-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-row-gap: var(
+  --#{root-defaults.$prefix}-accordion-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-gap: var(
+  --#{root-defaults.$prefix}-accordion-gap,
+  #{$accordion-column-gap} #{$accordion-row-gap}
+);
+
+// Accordion color properties.
+$accordion-color: var(
+  --#{root-defaults.$prefix}-accordion-color,
+  #{color.$root-color}
+);
+$accordion-background: var(
+  --#{root-defaults.$prefix}-accordion-background,
+  #{color.$root-background}
+);
+
+// Accordion item border properties.
+$accordion-item-border-color: var(
+  --#{root-defaults.$prefix}-accordion-item-border-color,
+  #{$accordion-color}
+);
+$accordion-item-top-left-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-top-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-top-right-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-top-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-bottom-left-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-bottom-left-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-bottom-right-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-bottom-right-border-radius,
+  #{root-variables.$border-radius}
+);
+$accordion-item-border-radius: var(
+  --#{root-defaults.$prefix}-accordion-item-border-radius,
+  #{$accordion-item-top-left-border-radius} #{$accordion-item-top-right-border-radius}
+    #{$accordion-item-bottom-right-border-radius} #{$accordion-item-bottom-left-border-radius}
+);
+$accordion-item-border-style: var(
+  --#{root-defaults.$prefix}-accordion-item-border-style,
+  #{root-variables.$border-style}
+);
+$accordion-item-border-width: var(
+  --#{root-defaults.$prefix}-accordion-item-border-width,
+  #{root-variables.$border-width}
+);
+$accordion-item-border: var(
+  --#{root-defaults.$prefix}-accordion-item-border,
+  #{$accordion-item-border-width} #{$accordion-item-border-style}
+);
+
+// Accordion item properties.
+$accordion-item-toggle-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-padding,
+  #{button.$button-padding}
+);
+
+// Transform properties.
+$accordion-item-toggle-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transform,
+  #{defaults.$accordion-item-toggle-transform}
+);
+$accordion-item-toggle-visited-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-visited-transform,
+  #{defaults.$accordion-item-toggle-visited-transform}
+);
+$accordion-item-toggle-focus-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-focus-transform,
+  #{defaults.$accordion-item-toggle-focus-transform}
+);
+$accordion-item-toggle-hover-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-hover-transform,
+  #{defaults.$accordion-item-toggle-hover-transform}
+);
+$accordion-item-toggle-active-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-active-transform,
+  #{defaults.$accordion-item-toggle-active-transform}
+);
+$accordion-item-toggle-disabled-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-disabled-transform,
+  #{defaults.$accordion-item-toggle-disabled-transform}
+);
+$accordion-item-toggle-transition: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transition,
+  background #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function},
+  transform #{map.get(root-variables.$transition-durations, fast)} #{root-variables.$transition-timing-function}
+);
+$accordion-item-toggle-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transition-reduced-motion,
+  background #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-durations, none)} #{root-variables.$transition-timing-function}
+);
+
+// Accordion item header properties.
+$accordion-item-header-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-header-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-header-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-header-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-header-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-header-padding,
+  #{$accordion-item-header-padding-y} #{$accordion-item-header-padding-x}
+);
+$accordion-item-header-margin: var(
+  --#{root-defaults.$prefix}-accordion-item-header-margin,
+  calc(-1 * #{$accordion-item-border-width})
+);
+
+// Accordion item title properties.
+$accordion-item-title-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-title-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-title-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-title-padding,
+  #{$accordion-item-title-padding-y} #{$accordion-item-title-padding-x}
+);
+$accordion-item-title-margin-x: var(
+  --#{root-defaults.$prefix}-accordion-item-title-margin-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-margin-y: var(
+  --#{root-defaults.$prefix}-accordion-item-title-margin-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-title-margin: var(
+  --#{root-defaults.$prefix}-accordion-item-title-margin,
+  #{$accordion-item-title-margin-y} #{$accordion-item-title-margin-x}
+);
+$accordion-title-color: var(
+  --#{root-defaults.$prefix}-accordion-title-color,
+  #{$accordion-color}
+);
+$accordion-title-font-size: var(
+  --#{root-defaults.$prefix}-accordion-title-font-size,
+  #{typography.$h5-font-size}
+);
+$accordion-title-font-weight: var(
+  --#{root-defaults.$prefix}-accordion-title-font-weight,
+  #{typography.$h5-font-weight}
+);
+$accordion-title-font-family: var(
+  --#{root-defaults.$prefix}-accordion-title-font-family,
+  #{typography.$h5-font-family}
+);
+$accordion-title-line-height: var(
+  --#{root-defaults.$prefix}-accordion-title-line-height,
+  #{typography.$h5-line-height}
+);
+
+// Accordion item content properties.
+$accordion-item-content-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-content-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$accordion-item-content-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-content-padding-y,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$accordion-item-content-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-content-padding,
+  #{$accordion-item-content-padding-y} #{$accordion-item-content-padding-x}
+);
+$accordion-item-content-column-gap: var(
+  --#{root-defaults.$prefix}-accordion-item-content-column-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$accordion-item-content-row-gap: var(
+  --#{root-defaults.$prefix}-accordion-item-content-row-gap,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-content-gap: var(
+  --#{root-defaults.$prefix}-accordion-item-content-gap,
+  #{$accordion-item-content-column-gap} #{$accordion-item-content-row-gap}
+);
+
+// Accordion item body properties.
+$accordion-item-body-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-body-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-body-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-body-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-body-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-body-padding,
+  #{$accordion-item-body-padding-y} #{$accordion-item-body-padding-x}
+);
+
+// Accordion item footer properties.
+$accordion-item-footer-padding-x: var(
+  --#{root-defaults.$prefix}-accordion-item-footer-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-footer-padding-y: var(
+  --#{root-defaults.$prefix}-accordion-item-footer-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$accordion-item-footer-padding: var(
+  --#{root-defaults.$prefix}-accordion-item-footer-padding,
+  #{$accordion-item-footer-padding-y} #{$accordion-item-footer-padding-x}
+);
+
+// Accordion item transition properties.
+$accordion-transition-duration: var(
+  --#{root-defaults.$prefix}-accordion-transition-duration,
+  #{map.get(root-variables.$transition-durations, slow)}
+);
+$accordion-item-toggle-transition-duration: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-transition-duration,
+  #{$accordion-transition-duration}
+);
+$accordion-transition: var(
+  --#{root-defaults.$prefix}-accordion-transition,
+  height #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+$accordion-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  none
+);
+$accordion-item-toggle-pseudo-transition: var(
+  --#{root-defaults.$prefix}-accordion-transition,
+  transform #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+$accordion-item-toggle-pseudo-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  none
+);
+$accordion-item-content-transition: var(
+  --#{root-defaults.$prefix}-accordion-transition,
+  opacity #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+    transform #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+$accordion-item-content-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  opacity #{map.get(root-variables.$transition-durations, slow)} #{root-variables.$transition-timing-function}
+);
+
+// Accordion item transform properties.
+$accordion-item-content-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-content-transform,
+  #{defaults.$accordion-item-content-transform}
+);
+$accordion-item-content-open-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-content-open-transform,
+  #{defaults.$accordion-item-content-open-transform}
+);
+$accordion-item-toggle-pseudo-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-pseudo-transform,
+  #{defaults.$accordion-item-toggle-pseudo-transform}
+);
+$accordion-item-toggle-pseudo-open-transform: var(
+  --#{root-defaults.$prefix}-accordion-item-toggle-pseudo-open-transform,
+  #{defaults.$accordion-item-toggle-pseudo-open-transform}
+);

package/src/scss/component/carousel/_index.scss

@@ -68,6 +68,7 @@
       1fr [previous-start] $carousel-control-width [previous-end next-start]
       $carousel-control-width [next-end];
     grid-template-rows: [autoplay-start next-start previous-start] $carousel-control-height [previous-end next-end autoplay-end];
+    pointer-events: none;
   }
 }
 
@@ -75,6 +76,8 @@
   @include button-mixins.apply-button;
 
   @include layer(component) {
+    pointer-events: auto;
+
     &#{defaults.$carousel-autoplay-selector} {
       grid-area: autoplay;
     }
@@ -170,6 +173,7 @@
     justify-content: center;
     padding: $carousel-tab-container-padding;
     gap: $carousel-tab-container-gap;
+    pointer-events: none;
   }
 }
 
@@ -178,5 +182,7 @@
 
   @include layer(component) {
     --#{root-defaults.$prefix}-button-border-radius: 50%;
+
+    pointer-events: auto;
   }
 }

package/src/scss/layout/columns/_index.scss

@@ -36,7 +36,7 @@
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
-  @include screen(xs) {
+  @include screen-trigger(force-single-column) {
     #{defaults.$columns-selector} {
       --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
 

package/src/scss/layout/flex-columns/_index.scss

@@ -39,7 +39,7 @@
       /* stylelint-enable  scss/operator-no-newline-after */
     }
 
-    @include screen(xs) {
+    @include screen-trigger(force-single-column) {
       #{defaults.$flex-columns-column-selector-prefix}#{$i} {
         --#{root-defaults.$prefix}-flex-columns-size: 100%;
         --#{root-defaults.$prefix}-flex-columns-max-width: auto;

package/src/scss/state/focus/_index.scss

@@ -2,12 +2,12 @@
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;
+@use "mixins" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
 
-@include layer(state) {
-  *:focus-visible {
-    border-color: transparent;
-    outline: $focus-outline-width $focus-outline-style $focus-outline-color;
-    outline-offset: $focus-outline-offset;
-    box-shadow: $focus-box-shadow;
+@each $state in map.get(root-defaults.$state-selectors, focus) {
+  *#{$state} {
+    @include apply-focus;
   }
 }

package/src/scss/state/focus/_mixins.scss

@@ -0,0 +1,15 @@
+// @graupl/graupl focus state mixins.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+
+@mixin apply-focus() {
+  @include layer(state) {
+    border-color: transparent;
+    outline: $focus-outline-width $focus-outline-style $focus-outline-color;
+    outline-offset: $focus-outline-offset;
+    box-shadow: $focus-box-shadow;
+  }
+}

package/stylelint.config.js

@@ -11,6 +11,10 @@ const config = {
     "selector-max-compound-selectors": 4,
     "max-nesting-depth": 4,
     "selector-no-qualifying-type": null,
+    "@stylistic/string-quotes": "double",
+    "@stylistic/function-parentheses-space-inside": "never-single-line",
+    "@stylistic/indentation": null,
+    "@stylistic/block-opening-brace-space-before": "never-single-line",
   },
 };
 

package/vite.config.js

@@ -0,0 +1,57 @@
+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,
+  },
+  server: {
+    host: "0.0.0.0",
+    hmr: {
+      host: "localhost",
+    },
+  },
+});