generator-chisel 2.3.3 → 2.4.0

package/lib/commands/create/creators/app/chisel-starter-theme/src/scripts/modules/slider.js

@@ -20,6 +20,8 @@ class Slider {
 
     const swiperInstance = new this.swiper(this.elements.slider, this.params);
     this.swipers.push(swiperInstance);
+
+    this.initAccessibility();
   }
 
   /*
@@ -369,6 +371,40 @@ class Slider {
 
     this.params.thumbs = moduleParams;
   }
+
+  /**
+   * Initialize accessibility features for screen readers.
+   * Creates an aria-live region that announces slide changes.
+   */
+  initAccessibility() {
+    if (this.swipers.length === 0) {
+      return;
+    }
+
+    const mainSwiper = this.swipers[0];
+    this.elements.liveRegion = this.createLiveRegion();
+
+    mainSwiper.on('slideChange', () => {
+      const currentSlide = mainSwiper.realIndex + 1;
+      const totalSlides = mainSwiper.slides.length;
+      this.elements.liveRegion.textContent = __('Slide %1$d of %2$d', 'chisel')
+        .replace('%1$d', currentSlide)
+        .replace('%2$d', totalSlides);
+    });
+  }
+
+  /**
+   * Create an aria-live region for announcing slide changes.
+   */
+  createLiveRegion() {
+    const liveRegion = document.createElement('div');
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('aria-atomic', 'true');
+    liveRegion.className = 'u-sr-only';
+    this.elements.sliderContainer.appendChild(liveRegion);
+
+    return liveRegion;
+  }
 }
 
 export default () => {
@@ -392,9 +428,14 @@ export default () => {
     };
   };
 
-  loadModules().then(({ swiper, swiperModules }) => {
-    sliders.forEach((slider) => {
-      new Slider(slider, swiper, swiperModules);
+  loadModules()
+    .then(({ swiper, swiperModules }) => {
+      sliders.forEach((slider) => {
+        new Slider(slider, swiper, swiperModules);
+      });
+    })
+    .catch((error) => {
+      // eslint-disable-next-line no-console
+      console.error('Failed to load Swiper modules:', error);
     });
-  });
 };

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_buttons.scss

@@ -81,7 +81,8 @@ $_static-icons: settings.$static-icons;
 }
 
 @each $icon in $_static-icons {
-  .c-btn.has-icon-#{$icon} {
+  .c-btn.has-icon-#{$icon},
+  span.has-icon-#{$icon} {
     &::after,
     &::before {
       @include icon-svg($icon);
@@ -89,7 +90,8 @@ $_static-icons: settings.$static-icons;
   }
 }
 
-.c-btn.has-icon {
+.c-btn.has-icon,
+span.has-icon {
   &::after,
   &::before {
     display: block;
@@ -115,4 +117,11 @@ $_static-icons: settings.$static-icons;
       display: none;
     }
   }
+
+  &.has-icon-only {
+    &::after,
+    &::before {
+      margin: 0;
+    }
+  }
 }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_search-form.scss

@@ -0,0 +1,17 @@
+@use '~design' as *;
+
+.c-search-form {
+  display: flex;
+  gap: get-gap('small');
+  align-items: center;
+  margin-bottom: get-margin('large');
+}
+
+.c-search-form__btn,
+.c-search-form__field {
+  margin: 0 !important;
+}
+
+.c-search-form__btn {
+  flex-shrink: 0;
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_slider.scss

@@ -114,13 +114,13 @@
     img {
       @include object-fit-cover;
 
-      border: 2px solid get-color('primary');
-      opacity: 0.7;
+      border: 2px solid get-color('foreground');
+      opacity: 0.75;
       transition: get-transition('normal');
     }
 
     &.swiper-slide-thumb-active img {
-      border: 2px solid get-color('foreground');
+      border: 2px solid get-color('primary');
       opacity: 1;
     }
   }

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-base.scss

@@ -0,0 +1,117 @@
+@use '~design' as *;
+@use 'mnt-settings' as *;
+
+// Main Nav Toggle - Hamburger Menu Component
+// Based on Hamburgers by Jonathan Suh (https://github.com/jonsuh/hamburgers)
+
+// This component has been split into modular subfiles for better organization.
+// Enable additional animation effects by uncommenting the @use statements below.
+
+// Available effects:
+// - slider (default) - Sliding bars animation
+// - squeeze - Squeeze bars together
+// - spin - Spinning animation
+// - elastic - Elastic bounce animation
+// - emphatic - Dramatic expansion
+// - collapse - Collapsing bars
+// - vortex - Spinning vortex effect
+// - stand - Stand up animation
+// - spring - Spring bounce effect
+// - 3d - 3D rotation effects (3dx, 3dy, 3dxy)
+
+// Required - Base styles and settings
+// 'main-nav-toggle/base';
+
+// Default animation effect
+// 'main-nav-toggle/slider';
+
+// To enable another effect rename the files with the desired effect by removing .disabled from the file name.
+// For example: _mnt-squeeze.scss.disabled -> _mnt-squeeze.scss
+
+// ==================================================
+// Hamburger Base Styles
+// ==================================================
+
+.c-main-nav__toggle {
+  right: px-rem(16);
+  display: inline-block;
+  display: block;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  margin: 0;
+  overflow: visible;
+
+  // Normalize (<button>)
+  font: inherit;
+  line-height: 1;
+  color: inherit;
+  text-transform: none;
+  appearance: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  transition-timing-function: linear;
+  transition-duration: 0.15s;
+  transition-property: opacity;
+
+  @include bp(large) {
+    display: none;
+  }
+
+  &:hover {
+    opacity: $hamburger-hover-opacity;
+  }
+
+  &.is-active {
+    z-index: 999;
+
+    &:hover {
+      opacity: $hamburger-active-hover-opacity;
+    }
+
+    .c-main-nav__toggle-inner,
+    .c-main-nav__toggle-inner::before,
+    .c-main-nav__toggle-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.c-main-nav__toggle-box {
+  position: relative;
+  display: inline-block;
+  width: $hamburger-layer-width;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+}
+
+.c-main-nav__toggle-inner {
+  top: 50%;
+  display: block;
+  margin-top: calc($hamburger-layer-height / -2);
+
+  &,
+  &::before,
+  &::after {
+    position: absolute;
+    width: $hamburger-layer-width;
+    height: $hamburger-layer-height;
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    transition-timing-function: ease;
+    transition-duration: 0.15s;
+    transition-property: transform;
+  }
+
+  &::before,
+  &::after {
+    display: block;
+    content: '';
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-collapse.scss.disabled

@@ -0,0 +1,66 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Collapse effect
+// ==================================================
+.c-main-nav__toggle--collapse,
+.c-main-nav__toggle--collapse-r {
+  .c-main-nav__toggle-inner {
+    top: auto;
+    bottom: 0;
+    transition-delay: 0.13s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition-duration: 0.13s;
+
+    &::after {
+      top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
+      transition:
+        top 0.2s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        opacity 0.1s linear;
+    }
+
+    &::before {
+      transition:
+        top 0.12s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transition-delay: 0.22s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0)
+        rotate(-45deg);
+
+      &::after {
+        top: 0;
+        opacity: 0;
+        transition:
+          top 0.2s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          opacity 0.1s 0.22s linear;
+      }
+
+      &::before {
+        top: 0;
+        transition:
+          top 0.1s 0.16s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--collapse-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0)
+        rotate(45deg);
+
+      &::before {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-elastic.scss.disabled

@@ -0,0 +1,56 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Elastic effect
+// ==================================================
+.c-main-nav__toggle--elastic,
+.c-main-nav__toggle--elastic-r {
+  .c-main-nav__toggle-inner {
+    top: calc($hamburger-layer-height / 2);
+    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    transition-duration: 0.275s;
+
+    &::before {
+      top: $hamburger-layer-height + $hamburger-layer-spacing;
+      transition: opacity 0.125s 0.275s ease;
+    }
+
+    &::after {
+      top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+      transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+      transition-delay: 0.075s;
+      transform: translate3d(0, $y-offset, 0) rotate(135deg);
+
+      &::before {
+        opacity: 0;
+        transition-delay: 0s;
+      }
+
+      &::after {
+        transition-delay: 0.075s;
+        transform: translate3d(0, $y-offset * -2, 0) rotate(-270deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--elastic-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+      transform: translate3d(0, $y-offset, 0) rotate(-135deg);
+
+      &::after {
+        transform: translate3d(0, $y-offset * -2, 0) rotate(270deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-emphatic.scss.disabled

@@ -0,0 +1,59 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Emphatic effect
+// ==================================================
+.c-main-nav__toggle--emphatic {
+  overflow: hidden;
+
+  .c-main-nav__toggle-inner {
+    transition: background-color 0.125s 0.175s ease-in;
+
+    &::before {
+      left: 0;
+      transition:
+        transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+        top 0.05s 0.125s linear,
+        left 0.125s 0.175s ease-in;
+    }
+
+    &::after {
+      top: ($hamburger-layer-height) + ($hamburger-layer-spacing);
+      right: 0;
+      transition:
+        transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335),
+        top 0.05s 0.125s linear,
+        right 0.125s 0.175s ease-in;
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transition-delay: 0s;
+      transition-timing-function: ease-out;
+
+      &::before {
+        top: $hamburger-layer-width * -2;
+        left: $hamburger-layer-width * -2;
+        transition:
+          left 0.125s ease-out,
+          top 0.05s 0.125s linear,
+          transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+        transform: translate3d($hamburger-layer-width * 2, $hamburger-layer-width * 2, 0)
+          rotate(45deg);
+      }
+
+      &::after {
+        top: $hamburger-layer-width * -2;
+        right: $hamburger-layer-width * -2;
+        transition:
+          right 0.125s ease-out,
+          top 0.05s 0.125s linear,
+          transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1);
+        transform: translate3d($hamburger-layer-width * -2, $hamburger-layer-width * 2, 0)
+          rotate(-45deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-settings.scss

@@ -0,0 +1,22 @@
+/*!
+ * Hamburgers
+ * @description Tasty CSS-animated hamburgers
+ * @author Jonathan Suh @jonsuh
+ * @site https://jonsuh.com/hamburgers
+ * @link https://github.com/jonsuh/hamburgers
+ */
+
+@use '~design' as *;
+
+// Settings
+// ==================================================
+$hamburger-padding-x: get-padding('normal') !default;
+$hamburger-padding-y: get-padding('normal') !default;
+$hamburger-layer-width: px-rem(36) !default;
+$hamburger-layer-height: px-rem(4) !default;
+$hamburger-layer-spacing: px-rem(6) !default;
+$hamburger-layer-color: get-color('primary') !default;
+$hamburger-layer-border-radius: get-border-radius('little') !default;
+$hamburger-hover-opacity: 0.7 !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-slider.scss

@@ -0,0 +1,59 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Slider effect
+// ==================================================
+.c-main-nav__toggle--slider,
+.c-main-nav__toggle--slider-r {
+  .c-main-nav__toggle-inner {
+    top: calc($hamburger-layer-height / 2);
+
+    &::before {
+      top: $hamburger-layer-height + $hamburger-layer-spacing;
+      transition-timing-function: ease;
+      transition-duration: 0.15s;
+      transition-property: transform, opacity;
+    }
+
+    &::after {
+      top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+      transform: translate3d(0, $y-offset, 0) rotate(45deg);
+
+      &::before {
+        opacity: 0;
+        transform: rotate(-45deg)
+          translate3d(calc($hamburger-layer-width / -7), $hamburger-layer-spacing * -1, 0);
+      }
+
+      &::after {
+        transform: translate3d(0, $y-offset * -2, 0) rotate(-90deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--slider-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      $y-offset: $hamburger-layer-spacing + $hamburger-layer-height;
+
+      transform: translate3d(0, $y-offset, 0) rotate(-45deg);
+
+      &::before {
+        transform: rotate(45deg)
+          translate3d(calc($hamburger-layer-width / 7), $hamburger-layer-spacing * -1, 0);
+      }
+
+      &::after {
+        transform: translate3d(0, $y-offset * -2, 0) rotate(90deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-spin.scss.disabled

@@ -0,0 +1,60 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Spin effect
+// ==================================================
+.c-main-nav__toggle--spin,
+.c-main-nav__toggle--spin-r {
+  .c-main-nav__toggle-inner {
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition-duration: 0.22s;
+
+    &::before {
+      transition:
+        top 0.1s 0.25s ease-in,
+        opacity 0.1s ease-in;
+    }
+
+    &::after {
+      transition:
+        bottom 0.1s 0.25s ease-in,
+        transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transition-delay: 0.12s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transform: rotate(225deg);
+
+      &::before {
+        top: 0;
+        opacity: 0;
+        transition:
+          top 0.1s ease-out,
+          opacity 0.1s 0.12s ease-out;
+      }
+
+      &::after {
+        bottom: 0;
+        transition:
+          bottom 0.1s ease-out,
+          transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(-90deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--spin-r {
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transform: rotate(-225deg);
+
+      &::after {
+        transform: rotate(90deg);
+      }
+    }
+  }
+}

package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/main-nav-toggle/_mnt-spring.scss.disabled

@@ -0,0 +1,98 @@
+@use 'mnt-settings' as *;
+
+// ==================================================
+// Spring effect
+// ==================================================
+.c-main-nav__toggle--spring {
+  .c-main-nav__toggle-inner {
+    top: calc($hamburger-layer-height / 2);
+    transition: background-color 0s 0.13s linear;
+
+    &::before {
+      top: $hamburger-layer-height + $hamburger-layer-spacing;
+      transition:
+        top 0.1s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+
+    &::after {
+      top: ($hamburger-layer-height * 2) + ($hamburger-layer-spacing * 2);
+      transition:
+        top 0.2s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      background-color: transparent !important;
+      transition-delay: 0.22s;
+
+      &::before {
+        top: 0;
+        transition:
+          top 0.1s 0.15s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0)
+          rotate(45deg);
+      }
+
+      &::after {
+        top: 0;
+        transition:
+          top 0.2s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: translate3d(0, $hamburger-layer-spacing + $hamburger-layer-height, 0)
+          rotate(-45deg);
+      }
+    }
+  }
+}
+
+.c-main-nav__toggle--spring-r {
+  .c-main-nav__toggle-inner {
+    top: auto;
+    bottom: 0;
+    transition-delay: 0s;
+    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    transition-duration: 0.13s;
+
+    &::after {
+      top: ($hamburger-layer-spacing * 2 + $hamburger-layer-height * 2) * -1;
+      transition:
+        top 0.2s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        opacity 0s linear;
+    }
+
+    &::before {
+      transition:
+        top 0.1s 0.2s cubic-bezier(0.3333, 0.6667, 0.6667, 1),
+        transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+  }
+
+  &.is-active {
+    .c-main-nav__toggle-inner {
+      transition-delay: 0.22s;
+      transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+      transform: translate3d(0, ($hamburger-layer-spacing + $hamburger-layer-height) * -1, 0)
+        rotate(-45deg);
+
+      &::after {
+        top: 0;
+        opacity: 0;
+        transition:
+          top 0.2s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          opacity 0s 0.22s linear;
+      }
+
+      &::before {
+        top: 0;
+        transition:
+          top 0.1s 0.15s cubic-bezier(0.3333, 0, 0.6667, 0.3333),
+          transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
+        transform: rotate(90deg);
+      }
+    }
+  }
+}