@faststore/ui 2.0.122-alpha.0 → 2.0.132-alpha.0

package/dist/index.d.ts

@@ -3,13 +3,7 @@ export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
-export { default as Bullets } from './components/molecules/Bullets';
-export type { BulletsProps } from './components/molecules/Bullets';
-export { default as Carousel } from './components/molecules/Carousel';
-export type { CarouselProps } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
 export { Tile, Tiles } from './components/organisms/Tiles';
 export type { TilesProps, TileProps } from './components/organisms/Tiles';
-export { default as useSlider } from './hooks/useSlider';
-export type { UseSliderArgs, SliderState, SliderDispatch, SlideDirection, } from './hooks/useSlider';

package/dist/index.js

@@ -3,11 +3,7 @@ export * from '@faststore/components';
 export { default as TextArea } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
-export { default as Bullets } from './components/molecules/Bullets';
-export { default as Carousel } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 // Organisms
 export { Tile, Tiles } from './components/organisms/Tiles';
-// Hooks
-export { default as useSlider } from './hooks/useSlider';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AAEZ,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.122-alpha.0",
+  "version": "2.0.132-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -58,5 +58,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "253c09ebb08354e8c7fead371d64e97cdf0b204b"
+  "gitHead": "e6d7561f0783b20ba4966d9e7c971146300ff129"
 }

package/src/components/atoms/Button/styles.scss

@@ -100,7 +100,7 @@
 
   // Small
   --fs-button-small-padding                         : var(--fs-spacing-0) var(--fs-spacing-1);
-  --fs-button-small-min-height                      : var(--fs-spacing-5);
+  --fs-button-small-min-height                      : var(--fs-spacing-7);
   --fs-button-small-gap                             : var(--fs-spacing-1);
   --fs-button-small-icon-width                      : var(--fs-spacing-3);
   --fs-button-small-icon-height                     : var(--fs-button-small-icon-width);
@@ -112,31 +112,52 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  display: inline-flex;
-  column-gap: var(--fs-button-gap);
-  align-items: center;
-  justify-content: center;
+  display: flex;
+  align-items: stretch;
+  width: fit-content;
   min-height: var(--fs-button-height);
-  padding: var(--fs-button-padding);
-  font-size: var(--fs-button-text-size);
-  font-weight: var(--fs-button-text-weight);
-  line-height: var(--fs-button-text-size);
-  text-decoration: none;
+  padding: 0;
   cursor: pointer;
-  border: var(--fs-button-border-width) solid var(--fs-button-border-color);
-  border-radius: var(--fs-button-border-radius);
-  outline: none;
-  box-shadow: var(--fs-button-shadow);
-  transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
+
+  [data-fs-button-wrapper] {
+    position: relative;
+    display: inline-flex;
+    column-gap: var(--fs-button-gap);
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: var(--fs-button-padding);
+    font-size: var(--fs-button-text-size);
+    font-weight: var(--fs-button-text-weight);
+    line-height: var(--fs-button-text-size);
+    text-decoration: none;
+    border: var(--fs-button-border-width) solid var(--fs-button-border-color);
+    border-radius: var(--fs-button-border-radius);
+    outline: none;
+    box-shadow: var(--fs-button-shadow);
+    transition: var(--fs-button-transition-property) var(--fs-button-transition-timing) var(--fs-button-transition-function);
+  }
+
 
   // --------------------------------------------------------
   // Variants Styles
   // --------------------------------------------------------
 
   &[data-fs-button-variant] {
-    @include focus-ring-visible;
 
-    &:disabled, &[data-fs-button-disabled="true"] {
+    &:focus, &:focus-visible { box-shadow: none; }
+
+    @media not all and (min-resolution: .001dpcm) {
+      @supports (-webkit-appearance:none) {
+        &:focus [data-fs-button-wrapper],
+        &:focus:hover [data-fs-button-wrapper] { @include focus-ring; }
+      }
+    }
+
+    &:focus-visible [data-fs-button-wrapper],
+    &:focus-visible:hover [data-fs-button-wrapper] { @include focus-ring; }
+
+    &:disabled [data-fs-button-wrapper], &[data-fs-button-disabled="true"] [data-fs-button-wrapper] {
       color: var(--fs-button-disabled-text-color);
       cursor: not-allowed;
       background-color: var(--fs-button-disabled-bkg-color);
@@ -153,58 +174,66 @@
 
   &[data-fs-button-size="small"] {
     --fs-control-tap-size: var(--fs-button-small-min-height);
+    padding: var(--fs-spacing-1);
 
-    column-gap: var(--fs-button-small-gap);
-    padding: var(--fs-button-small-padding);
+    [data-fs-button-wrapper] {
+      column-gap: var(--fs-button-small-gap);
+      padding: var(--fs-button-small-padding);
+    }
 
+    &:not([data-fs-icon-button="true"]) {
       [data-fs-icon] {
         width: var(--fs-button-small-icon-width);
         height: var(--fs-button-small-icon-height);
       }
-
+    }
   }
 
   &[data-fs-button-variant="primary"] {
-    color: var(--fs-button-primary-text-color);
-    background-color: var(--fs-button-primary-bkg-color);
-    border: var(--fs-button-border-width) solid var(--fs-button-primary-border-color);
+    [data-fs-button-wrapper] {
+      color: var(--fs-button-primary-text-color);
+      background-color: var(--fs-button-primary-bkg-color);
+      border: var(--fs-button-border-width) solid var(--fs-button-primary-border-color);
+    }
 
-    &:hover {
+    &:hover [data-fs-button-wrapper] {
       color: var(--fs-button-primary-text-color-hover);
       background-color: var(--fs-button-primary-bkg-color-hover);
       border-color: var(--fs-button-primary-border-color-hover);
       box-shadow: var(--fs-button-primary-shadow-hover);
     }
 
-    &:focus, &:focus-visible {
+    &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
       color: var(--fs-button-primary-text-color-hover);
       background-color: var(--fs-button-primary-bkg-color-hover);
     }
 
-    &:active {
+    &:active [data-fs-button-wrapper] {
       color: var(--fs-button-primary-text-color-active);
       background-color: var(--fs-button-primary-bkg-color-active);
       border-color: var(--fs-button-primary-border-color-active);
     }
 
     &[data-fs-button-inverse="true"] {
-      color: var(--fs-button-primary-inverse-text-color);
-      background-color: var(--fs-button-primary-inverse-bkg-color);
-      border: var(--fs-button-border-width) solid var(--fs-button-primary-inverse-border-color);
+      [data-fs-button-wrapper] {
+        color: var(--fs-button-primary-inverse-text-color);
+        background-color: var(--fs-button-primary-inverse-bkg-color);
+        border: var(--fs-button-border-width) solid var(--fs-button-primary-inverse-border-color);
+      }
 
-      &:hover {
+      &:hover [data-fs-button-wrapper] {
         color: var(--fs-button-primary-inverse-text-color-hover);
         background-color: var(--fs-button-primary-inverse-bkg-color-hover);
         border-color: var(--fs-button-primary-inverse-border-color-hover);
         box-shadow: var(--fs-button-primary-inverse-shadow-hover);
       }
 
-      &:focus, &:focus-visible {
+      &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
         color: var(--fs-button-primary-inverse-text-color-hover);
         background-color: var(--fs-button-primary-inverse-bkg-color-hover);
       }
 
-      &:active {
+      &:active [data-fs-button-wrapper] {
         color: var(--fs-button-primary-inverse-text-color-active);
         background-color: var(--fs-button-primary-inverse-bkg-color-active);
         border-color: var(--fs-button-primary-inverse-border-color-active);
@@ -213,46 +242,52 @@
   }
 
   &[data-fs-button-variant="secondary"] {
-    color: var(--fs-button-secondary-text-color);
-    background-color: var(--fs-button-secondary-bkg-color);
-    border: var(--fs-button-border-width) solid var(--fs-button-secondary-border-color);
 
-    &:hover {
+    [data-fs-button-wrapper] {
+      color: var(--fs-button-secondary-text-color);
+      background-color: var(--fs-button-secondary-bkg-color);
+      border: var(--fs-button-border-width) solid var(--fs-button-secondary-border-color);
+    }
+
+    &:hover [data-fs-button-wrapper] {
       color: var(--fs-button-secondary-text-color-hover);
       background-color: var(--fs-button-secondary-bkg-color-hover);
       border-color: var(--fs-button-secondary-border-color-hover);
       box-shadow: var(--fs-button-secondary-shadow-hover);
     }
 
-    &:focus, &:focus-visible {
+    &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
       color: var(--fs-button-secondary-text-color-hover);
       background-color: var(--fs-button-secondary-bkg-color-hover);
     }
 
-    &:active {
+    &:active [data-fs-button-wrapper] {
       color: var(--fs-button-secondary-text-color-active);
       background-color: var(--fs-button-secondary-bkg-color-active);
       border-color: var(--fs-button-secondary-border-color-active);
     }
 
     &[data-fs-button-inverse="true"] {
-      color: var(--fs-button-secondary-inverse-text-color);
-      background-color: var(--fs-button-secondary-inverse-bkg-color);
-      border: var(--fs-button-border-width) solid var(--fs-button-secondary-inverse-border-color);
 
-      &:hover {
+      [data-fs-button-wrapper] {
+        color: var(--fs-button-secondary-inverse-text-color);
+        background-color: var(--fs-button-secondary-inverse-bkg-color);
+        border: var(--fs-button-border-width) solid var(--fs-button-secondary-inverse-border-color);
+      }
+
+      &:hover [data-fs-button-wrapper] {
         color: var(--fs-button-secondary-inverse-text-color-hover);
         background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
         border-color: var(--fs-button-secondary-inverse-border-color-hover);
         box-shadow: var(--fs-button-secondary-inverse-shadow-hover);
       }
 
-      &:focus, &:focus-visible {
+      &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
         color: var(--fs-button-secondary-inverse-text-color-hover);
         background-color: var(--fs-button-secondary-inverse-bkg-color-hover);
       }
 
-      &:active {
+      &:active [data-fs-button-wrapper] {
         color: var(--fs-button-secondary-inverse-text-color-active);
         background-color: var(--fs-button-secondary-inverse-bkg-color-active);
         border-color: var(--fs-button-secondary-inverse-border-color-active);
@@ -261,46 +296,52 @@
   }
 
   &[data-fs-button-variant="tertiary"] {
-    color: var(--fs-button-tertiary-text-color);
-    background-color: var(--fs-button-tertiary-bkg-color);
-    border: var(--fs-button-border-width) solid var(--fs-button-tertiary-border-color);
 
-    &:hover {
+    [data-fs-button-wrapper] {
+      color: var(--fs-button-tertiary-text-color);
+      background-color: var(--fs-button-tertiary-bkg-color);
+      border: var(--fs-button-border-width) solid var(--fs-button-tertiary-border-color);
+    }
+
+    &:hover [data-fs-button-wrapper] {
       color: var(--fs-button-tertiary-text-color-hover);
       background-color: var(--fs-button-tertiary-bkg-color-hover);
       border-color: var(--fs-button-tertiary-border-color-hover);
       box-shadow: var(--fs-button-tertiary-shadow-hover);
     }
 
-    &:focus, &:focus-visible {
+    &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
       color: var(--fs-button-tertiary-text-color-hover);
       background-color: var(--fs-button-tertiary-bkg-color-hover);
     }
 
-    &:active {
+    &:active [data-fs-button-wrapper] {
       color: var(--fs-button-tertiary-text-color-active);
       background-color: var(--fs-button-tertiary-bkg-color-active);
       border-color: var(--fs-button-tertiary-border-color-active);
     }
 
     &[data-fs-button-inverse="true"] {
-      color: var(--fs-button-tertiary-inverse-text-color);
-      background-color: var(--fs-button-tertiary-inverse-bkg-color);
-      border: var(--fs-button-border-width) solid var(--fs-button-tertiary-inverse-border-color);
 
-      &:hover {
+      [data-fs-button-wrapper] {
+        color: var(--fs-button-tertiary-inverse-text-color);
+        background-color: var(--fs-button-tertiary-inverse-bkg-color);
+        border: var(--fs-button-border-width) solid var(--fs-button-tertiary-inverse-border-color);
+      }
+
+      &:hover [data-fs-button-wrapper] {
         color: var(--fs-button-tertiary-inverse-text-color-hover);
         background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
         border-color: var(--fs-button-tertiary-inverse-border-color-hover);
         box-shadow: var(--fs-button-tertiary-inverse-shadow-hover);
       }
 
-      &:focus, &:focus-visible {
+      &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
         color: var(--fs-button-tertiary-inverse-text-color-hover);
         background-color: var(--fs-button-tertiary-inverse-bkg-color-hover);
       }
 
-      &:active {
+      &:active [data-fs-button-wrapper] {
         color: var(--fs-button-tertiary-inverse-text-color-active);
         background-color: var(--fs-button-tertiary-inverse-bkg-color-active);
         border-color: var(--fs-button-tertiary-inverse-border-color-active);
@@ -309,18 +350,17 @@
   }
 
   &[data-fs-icon-button="true"] {
-    position: relative;
-    column-gap: 0;
+    width: var(--fs-button-height);
 
-    &[data-fs-button-variant] {
-      width: var(--fs-button-height);
-      height: var(--fs-button-height);
-      padding: var(--fs-button-icon-padding);
+    [data-fs-button-wrapper] {
+      column-gap: 0;
+      padding: 0;
       border-width: 0;
+      width: 100%;
     }
   }
 
-  &[data-fs-button-loading="true"] {
+  &[data-fs-button-loading="true"] [data-fs-button-wrapper] {
     > * {
       opacity: 0;
       pointer-events: none;

package/src/components/molecules/Accordion/styles.scss

@@ -37,7 +37,9 @@
     }
   }
 
-  [data-fs-accordion-button] {
+  [data-fs-accordion-button] { width: 100%; }
+
+  [data-fs-accordion-button] [data-fs-button-wrapper] {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;

package/src/components/molecules/Alert/styles.scss

@@ -76,22 +76,9 @@
   }
 
   [data-fs-alert-button] {
-    min-width: var(--fs-control-tap-size);
-    height: 100%;
-    padding: var(--fs-spacing-0);
     margin-left: auto;
-    color: var(--fs-alert-button-text-color);
-    background-color: var(--fs-alert-button-bkg-color);
-
-    > span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      background-color: var(--fs-alert-button-bkg-color);
-      border-radius: var(--fs-alert-button-border-radius);
-    }
+
+    [data-fs-button-wrapper] { color: var(--fs-alert-button-text-color); }
 
     &:hover span {
       filter: brightness(0.95);

package/src/components/molecules/Banner/styles.scss

@@ -59,7 +59,7 @@
 
   [data-fs-banner-text-link] [data-fs-link-button] {
     min-width: var(--fs-banner-button-link-min-width);
-    margin-top: var(--fs-banner-button-link-margin-top);
+    margin: var(--fs-banner-button-link-margin-top) auto 0;
   }
 
   // --------------------------------------------------------

package/src/components/molecules/BuyButton/styles.scss

@@ -25,22 +25,26 @@
   @include focus-ring-visible;
 
   color: var(--fs-buy-button-text-color);
-  background-color: var(--fs-buy-button-bkg-color);
-  border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
 
-  &:hover {
+  [data-fs-button-wrapper] {
+    background-color: var(--fs-buy-button-bkg-color);
+    border: var(--fs-button-border-width) solid var(--fs-buy-button-border-color);
+  }
+
+
+  &:hover [data-fs-button-wrapper] {
     color: var(--fs-buy-button-text-color-hover);
     background-color: var(--fs-buy-button-bkg-color-hover);
     border-color: var(--fs-buy-button-border-color-hover);
     box-shadow: var(--fs-buy-button-shadow-hover);
   }
 
-  &:focus, &:focus-visible {
+  &:focus [data-fs-button-wrapper], &:focus-visible [data-fs-button-wrapper] {
     color: var(--fs-buy-button-text-color-hover);
     background-color: var(--fs-buy-button-bkg-color-hover);
   }
 
-  &:active {
+  &:active [data-fs-button-wrapper] {
     color: var(--fs-buy-button-text-color-hover);
     background-color: var(--fs-buy-button-bkg-color-active);
     border-color: var(--fs-buy-button-border-color-active);

package/src/components/molecules/Carousel/styles.scss

@@ -4,49 +4,59 @@
   // --------------------------------------------------------
 
   // Track
-  --fs-carousel-padding-desktop           : var(--fs-spacing-0) 6.25rem;
+  --fs-carousel-padding-mobile             : 0 var(--fs-grid-padding);
+  --fs-carousel-padding-desktop            : 0 calc((100vw - 1230px)/2);
 
   // Item
-  --fs-carousel-item-width-mobile         : 80%;
-  --fs-carousel-item-width-desktop        : 15rem;
-  --fs-carousel-item-margin-right         : var(--fs-spacing-0);
+  --fs-carousel-item-width-mobile          : 60%;
+  --fs-carousel-item-width-tablet          : 14.2rem;
+  --fs-carousel-item-width-desktop         : 14.4rem;
+  --fs-carousel-item-margin-right          : var(--fs-spacing-3);
 
   // Controls
-  --fs-carousel-controls-width            : 3.125rem;
-  --fs-carousel-controls-height           : var(--fs-carousel-controls-width);
-  --fs-carousel-controls-position-top     : calc((100% - var(--fs-spacing-7) - var(--fs-spacing-1)) / 2);
-  --fs-carousel-controls-bkg-color        : var(--fs-color-neutral-0);
-  --fs-carousel-controls-border-radius    : var(--fs-border-radius-circle);
-  --fs-carousel-controls-box-shadow       : var(--fs-shadow-darker);
-  --fs-carousel-controls-icon-color       : var(--fs-color-neutral-7);
-
-  --fs-carousel-controls-control-left     : var(--fs-spacing-5);
-  --fs-carousel-controls-control-right    : var(--fs-carousel-controls-control-left);
+  --fs-carousel-controls-width             : 3.125rem;
+  --fs-carousel-controls-height            : var(--fs-carousel-controls-width);
+  --fs-carousel-controls-bkg-color         : var(--fs-color-neutral-0);
+  --fs-carousel-controls-border-radius     : var(--fs-border-radius-circle);
+  --fs-carousel-controls-box-shadow        : var(--fs-shadow-darker);
+  --fs-carousel-controls-icon-color        : var(--fs-color-neutral-7);
+
+  --fs-carousel-controls-control-left      : var(--fs-spacing-4);
+  --fs-carousel-controls-control-right     : var(--fs-carousel-controls-control-left);
+  --fs-carousel-controls-control-max-left  : calc(-1 * var(--fs-spacing-11));
+  --fs-carousel-controls-control-max-right : var(--fs-carousel-controls-control-max-left);
 
   // Bullets
-  --fs-carousel-bullets-padding-top       : var(--fs-carousel-controls-control-left);
-
-  --fs-carousel-bullet-width-mobile       : 100%;
-  --fs-carousel-bullet-width-desktop      : var(--fs-spacing-1);
-  --fs-carousel-bullet-height-mobile      : var(--fs-carousel-item-margin-right);
-  --fs-carousel-bullet-height-desktop     : var(--fs-carousel-bullet-width-desktop);
-  --fs-carousel-bullet-margin-right       : var(--fs-carousel-item-margin-right);
-  --fs-carousel-bullet-bkg-color          : var(--fs-color-neutral-3);
-  --fs-carousel-bullet-bkg-color-selected : var(--fs-color-main-4);
-  --fs-carousel-bullet-border-radius      : var(--fs-carousel-controls-border-radius);
+  --fs-carousel-bullets-padding-top        : var(--fs-carousel-controls-control-left);
+  --fs-carousel-bullets-padding-left       : var(--fs-grid-padding);
+  --fs-carousel-bullets-padding-right      : var(--fs-carousel-bullets-padding-left);
+  --fs-carousel-bullets-column-gap-mobile  : var(--fs-spacing-0);
+  --fs-carousel-bullets-column-gap-tablet  : var(--fs-spacing-3);
+
+  --fs-carousel-bullet-width-mobile        : 100%;
+  --fs-carousel-bullet-width-desktop       : var(--fs-spacing-1);
+  --fs-carousel-bullet-height-mobile       : var(--fs-spacing-0);
+  --fs-carousel-bullet-height-desktop      : var(--fs-carousel-bullet-width-desktop);
+  --fs-carousel-bullet-bkg-color           : var(--fs-color-neutral-3);
+  --fs-carousel-bullet-bkg-color-selected  : var(--fs-color-main-4);
+  --fs-carousel-bullet-border-radius       : var(--fs-carousel-controls-border-radius);
 
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
 
+  width: inherit;
+
   &:hover {
     [data-fs-carousel-controls] {
+      position: relative;
+
       @include media(">=tablet") {
         display: flex;
-        width: 100%;
+        margin: var(--fs-carousel-padding-desktop);
 
         [data-fs-carousel-control] {
-          top: var(--fs-carousel-controls-position-top);
+          bottom: calc(var(--fs-carousel-controls-height) + var(--fs-control-tap-size));
           display: flex;
           align-items: center;
           justify-content: center;
@@ -62,25 +72,41 @@
 
         [data-fs-carousel-control="left"] {
           position: absolute;
-          left: var(--fs-carousel-controls-control-left);
+          left: var(--fs-carousel-controls-control-right);
+          @include media(">notebook") {
+            left: var(--fs-carousel-controls-control-max-left);
+          }
         }
 
         [data-fs-carousel-control="right"] {
           position: absolute;
           right: var(--fs-carousel-controls-control-right);
+          @include media(">notebook") {
+            right: var(--fs-carousel-controls-control-max-right);
+          }
         }
 
-        [data-fs-icon] { display: flex; }
+        [data-fs-icon] {
+          display: flex;
+          color: var(--fs-carousel-controls-icon-color);
+        }
       }
     }
   }
 
+  [data-fs-carousel-controls] {
+    position: relative;
+    display: none;
+  }
+
   [data-fs-carousel-track] {
+    padding: var(--fs-carousel-padding-mobile);
+
     &::-webkit-scrollbar {
       display: none;
     }
 
-    @include media(">=tablet") {
+    @include media(">notebook") {
       padding: var(--fs-carousel-padding-desktop);
     }
   }
@@ -88,51 +114,48 @@
   [data-fs-carousel-item] {
     width: var(--fs-carousel-item-width-mobile);
 
-    @include media(">=tablet") {
-      width: var(--fs-carousel-item-width-desktop);
-      height: 100%;
+    &:not(:last-of-type) {
       margin-right: var(--fs-carousel-item-margin-right);
     }
-  }
 
-  [data-fs-icon] {
-    color: var(--fs-carousel-controls-icon-color);
-  }
+    @include media(">=tablet") {
+      width: var(--fs-carousel-item-width-tablet);
+      height: 100%;
+    }
 
-  [data-fs-carousel-controls] {
-    display: none;
+    @include media(">=desktop") {
+      width: var(--fs-carousel-item-width-desktop);
+    }
   }
 
   [data-fs-carousel-bullets] {
+    position: relative;
     width: 100%;
     padding-top: var(--fs-carousel-bullets-padding-top);
+    display: flex;
+    flex-flow: row nowrap;
+    column-gap: var(--fs-carousel-bullets-column-gap-mobile);
+    padding-left: var(--fs-carousel-bullets-padding-left);
+    padding-right: var(--fs-carousel-bullets-padding-right);
 
     @include media(">=tablet") {
-      display: flex;
+      width: fit-content;
       align-items: center;
       justify-content: center;
+      margin: auto;
+      column-gap: var(--fs-carousel-bullets-column-gap-tablet);
     }
 
-    [data-fs-bullets] {
-      display: flex;
-      flex-flow: row nowrap;
-
-      @include media(">=tablet") {
-        column-gap: var(--fs-spacing-3);
-      }
-
-      [data-fs-bullet] {
-        width: var(--fs-carousel-bullet-width-mobile);
-        height: var(--fs-carousel-bullet-height-mobile);
+    [data-fs-carousel-bullet] {
+      width: var(--fs-carousel-bullet-width-mobile);
+      align-items: center;
+      justify-content: center;
+      [data-fs-button-wrapper] {
         padding: 0;
-        margin-right: var(--fs-carousel-bullet-margin-right);
+        height: var(--fs-carousel-bullet-height-mobile);
         background-color: var(--fs-carousel-bullet-bkg-color);
         border-color: transparent;
-
-        &[aria-selected="true"] {
-          background-color: var(--fs-carousel-bullet-bkg-color-selected);
-        }
-
+        border-radius: 0;
         @include media(">=tablet") {
           width: var(--fs-carousel-bullet-width-desktop);
           height: var(--fs-carousel-bullet-height-desktop);
@@ -140,6 +163,9 @@
           border-radius: var(--fs-carousel-bullet-border-radius);
         }
       }
+      &[aria-selected="true"] [data-fs-button-wrapper] {
+        background-color: var(--fs-carousel-bullet-bkg-color-selected);
+      }
     }
   }
 }