feat(carousel): add with-scrollbar and with-fullscreen attributes

Author: zedix

.storybook/tailwind.css

@@ -1 +1,11 @@
 @import 'tailwindcss';
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}

src/components/carousel/carousel.component.ts

@@ -145,6 +145,12 @@ export default class Carousel extends LitElement {
   @property({ type: Boolean, attribute: 'with-dots' })
   withDots = false;
 
+  @property({ type: Boolean, attribute: 'with-scrollbar' })
+  withScrollbar = false;
+
+  @property({ type: Boolean, attribute: 'with-fullscreen' })
+  withFullscreen = false;
+
   @query('.button-prev') previousBtn!: HTMLButtonElement;
   @query('.button-next') nextBtn!: HTMLButtonElement;
   @query('.container') container!: HTMLSlotElement;
@@ -335,23 +341,51 @@ export default class Carousel extends LitElement {
     return this.embla?.internalEngine().options.active;
   }
 
+  renderFullscreenButton() {
+    return html`<button
+      type="button"
+      part="button button-fullscreen"
+      class="button button-fullscreen"
+      @click=${dispatchEvent(this, 'fullscreen')}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        fill="currentColor"
+        part="button-icon button-icon-fullscreen"
+      >
+        <path
+          d="M295 183c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l135-135 0 86.1c0 13.3 10.7 24 24 24s24-10.7 24-24l0-144c0-13.3-10.7-24-24-24L344 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l86.1 0-135 135zM217 329c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L48 430.1 48 344c0-13.3-10.7-24-24-24S0 330.7 0 344L0 488c0 13.3 10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-86.1 0 135-135z"
+        />
+      </svg>
+    </button>`;
+  }
+
   renderNextPrevButtons() {
     return html`<div class="buttons">
       <button part="button button-prev" class="button button-prev" type="button">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" part="svg">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          part="button-icon button-icon-prev"
+        >
           <path
-            fill-rule="evenodd"
-            d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
-          ></path>
+            d="M7 239c-9.4 9.4-9.4 24.6 0 33.9L175 441c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L81.9 280 488 280c13.3 0 24-10.7 24-24s-10.7-24-24-24L81.9 232 209 105c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239z"
+          />
         </svg>
       </button>
 
       <button part="button button-next" class="button button-next" type="button">
-        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" part="svg">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+          fill="currentColor"
+          part="button-icon button-icon-next"
+        >
           <path
-            fill-rule="evenodd"
-            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
-          ></path>
+            d="M505 273c9.4-9.4 9.4-24.6 0-33.9L337 71c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l127 127-406.1 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l406.1 0-127 127c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0L505 273z"
+          />
         </svg>
       </button>
     </div>`;
@@ -363,7 +397,7 @@ export default class Carousel extends LitElement {
         <div part="viewport" class="viewport">
           <slot part="container" class="container" @slotchange=${this.handleSlotChange}></slot>
         </div>
-        ${this.renderNextPrevButtons()}
+        ${this.withFullscreen ? this.renderFullscreenButton() : ''} ${this.renderNextPrevButtons()}
         ${this.withDots
           ? html`<div class="dots">
               ${map(this.embla.scrollSnapList(), (_, index) => {

src/components/carousel/carousel.stories.ts

@@ -140,6 +140,44 @@ export const WithDots: Story = {
   `,
 };
 
+export const Product: Story = {
+  render: () => html`
+    <zx-carousel single with-dots with-fullscreen>
+      ${repeat(
+        Array.from({ length: 3 }),
+        () => html`
+          <zx-carousel-item>
+            <img
+              class="object-cover w-full h-96"
+              src="https://cdn.laredoute.com/cdn-cgi/image/width=1200,height=1200,fit=pad,dpr=1/products/2/7/7/2771002a81df04419ccc3cd5c839e479.jpg"
+              height="400"
+            />
+          </zx-carousel-item>
+        `,
+      )}
+    </zx-carousel>
+  `,
+};
+
+export const MoreProducts: Story = {
+  render: () => html`
+    <zx-carousel drag-free with-scrollbar style="--slide-size: calc(100% / 3); --slide-gap: 1rem;">
+      ${repeat(
+        Array.from({ length: 10 }),
+        () => html`
+          <zx-carousel-item>
+            <img
+              class="object-cover w-full h-96"
+              src="https://cdn.laredoute.com/cdn-cgi/image/width=1200,height=1200,fit=pad,dpr=1/products/2/7/7/2771002a81df04419ccc3cd5c839e479.jpg"
+              height="400"
+            />
+          </zx-carousel-item>
+        `,
+      )}
+    </zx-carousel>
+  `,
+};
+
 export const WithAutoplay: Story = {
   render: () => html`
     <zx-carousel

src/components/carousel/carousel.styles.ts

@@ -20,7 +20,7 @@ export default css`
     --slide-size: 100%;
     --slide-gap: 0;
 
-    --button-size: 40px;
+    --button-size: 48px;
     --button-arrow-size: 20px;
     --button-arrow-color: #4b5563;
     --button-offset: 8px;
@@ -39,6 +39,8 @@ export default css`
     --dot-color-active: #111827;
     --dot-margin: 0.5rem 0;
 
+    --scrollbar-color: oklch(70.7% 0.022 261.325) transparent;
+
     display: block;
     /* Note: moving this elsewhere (e.g wrapper) may bug the container translate position */
     position: relative;
@@ -62,6 +64,12 @@ export default css`
     overflow: hidden;
   }
 
+  :host([with-scrollbar]) .viewport {
+    overflow: auto;
+    scrollbar-color: var(--scrollbar-color); /* progress / track */
+    scrollbar-width: thin;
+  }
+
   .container {
     backface-visibility: hidden;
     display: flex;
@@ -88,7 +96,8 @@ export default css`
   }
 
   .button-next,
-  .button-prev {
+  .button-prev,
+  .button-fullscreen {
     position: absolute;
     top: calc(50% - (var(--button-size) / 2));
     z-index: 1;
@@ -117,6 +126,11 @@ export default css`
     right: var(--button-offset);
   }
 
+  .button-fullscreen {
+    right: var(--button-offset);
+    top: var(--button-offset);
+  }
+
   @media (hover: hover) {
     .button:hover:not(:disabled) {
       box-shadow: var(--button-box-shadow-hover);

src/components/tooltip/tooltip.component.ts

@@ -145,8 +145,10 @@ export default class Tooltip extends LitElement {
 
   render() {
     return html`
-      ${this.noArrow ? null : html`<i part="arrow" role="presentation"></i>`}
-      <slot></slot>
+      <div part="body" class="body">
+        ${this.noArrow ? null : html`<i part="arrow" role="presentation"></i>`}
+        <slot></slot>
+      </div>
     `;
   }
 }

src/components/tooltip/tooltip.styles.ts

@@ -2,26 +2,36 @@ import { css } from 'lit';
 
 export default css`
   :host {
-    --background-color: #1f2937;
     --arrow-size: 8px;
     --arrow-color: var(--background-color);
+    --background-color: #1f2937;
+    --border-radius: 4px;
+    --color: #fff;
+    --font-size: 13px;
+    --padding: 4px 8px;
     --shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
 
     position: absolute;
     isolation: isolate;
     display: block;
     box-sizing: border-box;
-    padding: 4px 8px;
+
+    /* Customizable with CSS class */
     width: max-content;
     max-width: 180px;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     background-color: var(--background-color);
-    color: #fff;
-    font-size: 13px;
+    color: var(--color);
+    font-size: var(--font-size);
     filter: drop-shadow(var(--shadow));
     z-index: 10;
   }
 
+  .body {
+    /* Avoid padding reset from tailwindcss  */
+    padding: var(--padding);
+  }
+
   i {
     position: absolute;
     display: block;