@emuanalytics/flow-rdf-ui 4.0.5 → 4.0.7

package/dist/components/card/card.styles.mjs

@@ -0,0 +1,73 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --border-color: var(--flow-ui-color-neutral-200);
+    --border-radius: var(--flow-ui-border-radius-medium);
+    --border-width: 1px;
+    --padding: var(--flow-ui-spacing-large);
+
+    display: inline-block;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--flow-ui-panel-background-color);
+    box-shadow: var(--flow-ui-shadow-x-small);
+    border: solid var(--border-width) var(--border-color);
+    border-radius: var(--border-radius);
+  }
+
+  .card__image {
+    display: flex;
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+    margin: calc(-1 * var(--border-width));
+    overflow: hidden;
+  }
+
+  .card__image::slotted(img) {
+    display: block;
+    width: 100%;
+  }
+
+  .card:not(.card--has-image) .card__image {
+    display: none;
+  }
+
+  .card__header {
+    display: block;
+    border-bottom: solid var(--border-width) var(--border-color);
+    padding: calc(var(--padding) / 2) var(--padding);
+  }
+
+  .card:not(.card--has-header) .card__header {
+    display: none;
+  }
+
+  .card:not(.card--has-image) .card__header {
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .card__body {
+    display: block;
+    padding: var(--padding);
+  }
+
+  .card--has-footer .card__footer {
+    display: block;
+    border-top: solid var(--border-width) var(--border-color);
+    padding: var(--padding);
+  }
+
+  .card:not(.card--has-footer) .card__footer {
+    display: none;
+  }
+`;
+
+export { styles as default };

package/dist/components/carousel/autoplay-controller.mjs

@@ -0,0 +1,56 @@
+class AutoplayController {
+  constructor(host, tickCallback) {
+    this.timerId = 0;
+    this.activeInteractions = 0;
+    this.paused = false;
+    this.stopped = true;
+    this.pause = () => {
+      if (!this.activeInteractions++) {
+        this.paused = true;
+        this.host.requestUpdate();
+      }
+    };
+    this.resume = () => {
+      if (!--this.activeInteractions) {
+        this.paused = false;
+        this.host.requestUpdate();
+      }
+    };
+    host.addController(this);
+    this.host = host;
+    this.tickCallback = tickCallback;
+  }
+  hostConnected() {
+    this.host.addEventListener("mouseenter", this.pause);
+    this.host.addEventListener("mouseleave", this.resume);
+    this.host.addEventListener("focusin", this.pause);
+    this.host.addEventListener("focusout", this.resume);
+    this.host.addEventListener("touchstart", this.pause, { passive: true });
+    this.host.addEventListener("touchend", this.resume);
+  }
+  hostDisconnected() {
+    this.stop();
+    this.host.removeEventListener("mouseenter", this.pause);
+    this.host.removeEventListener("mouseleave", this.resume);
+    this.host.removeEventListener("focusin", this.pause);
+    this.host.removeEventListener("focusout", this.resume);
+    this.host.removeEventListener("touchstart", this.pause);
+    this.host.removeEventListener("touchend", this.resume);
+  }
+  start(interval) {
+    this.stop();
+    this.stopped = false;
+    this.timerId = window.setInterval(() => {
+      if (!this.paused) {
+        this.tickCallback();
+      }
+    }, interval);
+  }
+  stop() {
+    clearInterval(this.timerId);
+    this.stopped = true;
+    this.host.requestUpdate();
+  }
+}
+
+export { AutoplayController };

package/dist/components/carousel/carousel.component.mjs

@@ -0,0 +1,406 @@
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { map } from 'lit/directives/map.js';
+import { range } from 'lit/directives/range.js';
+import { prefersReducedMotion } from '../../internal/animate.mjs';
+import { boolean } from '../../internal/boolean.mjs';
+import FlowRdfElement from '../../internal/flow-ui-rdf-element.mjs';
+import { clamp } from '../../internal/math.mjs';
+import { watch } from '../../internal/watch.mjs';
+import { LocalizeController } from '../../utilities/localize.mjs';
+import FlowUiCarouselItem from '../carousel-item/carousel-item.component.mjs';
+import { AutoplayController } from './autoplay-controller.mjs';
+import styles from './carousel.styles.mjs';
+import { ScrollController } from './scroll-controller.mjs';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class FlowUiCarousel extends FlowRdfElement {
+  constructor() {
+    super(...arguments);
+    this.loop = false;
+    this.navigation = false;
+    this.pagination = false;
+    this.autoplay = false;
+    this.autoplayInterval = 3e3;
+    this.slidesPerPage = 1;
+    this.slidesPerMove = 1;
+    this.orientation = "horizontal";
+    this.mouseDragging = false;
+    this.activeSlide = 0;
+    this.autoplayController = new AutoplayController(this, () => this.next());
+    this.scrollController = new ScrollController(this);
+    this.slides = this.getElementsByTagName("flow-ui-carousel-item");
+    // determines which slide is displayed
+    // A map containing the state of all the slides
+    this.intersectionObserverEntries = /* @__PURE__ */ new Map();
+    this.localize = new LocalizeController(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loop = boolean(this.loop, true);
+    this.navigation = boolean(this.navigation, true);
+    this.pagination = boolean(this.pagination, true);
+    this.autoplay = boolean(this.autoplay, true);
+    this.mouseDragging = boolean(this.mouseDragging, true);
+    this.setAttribute("role", "region");
+    this.setAttribute("aria-label", this.localize.term("carousel"));
+    const intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          this.intersectionObserverEntries.set(entry.target, entry);
+          const slide = entry.target;
+          slide.toggleAttribute("inert", !entry.isIntersecting);
+          slide.classList.toggle("--in-view", entry.isIntersecting);
+          slide.setAttribute("aria-hidden", entry.isIntersecting ? "false" : "true");
+        });
+      },
+      {
+        root: this,
+        threshold: 0.6
+      }
+    );
+    this.intersectionObserver = intersectionObserver;
+    intersectionObserver.takeRecords().forEach((entry) => {
+      this.intersectionObserverEntries.set(entry.target, entry);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.intersectionObserver.disconnect();
+    this.mutationObserver.disconnect();
+  }
+  firstUpdated() {
+    this.initializeSlides();
+    this.mutationObserver = new MutationObserver(this.handleSlotChange.bind(this));
+    this.mutationObserver.observe(this, { childList: true, subtree: false });
+  }
+  getPageCount() {
+    return Math.ceil(this.getSlides().length / this.slidesPerPage);
+  }
+  getCurrentPage() {
+    return Math.floor(this.activeSlide / this.slidesPerPage);
+  }
+  getSlides({ excludeClones = true } = {}) {
+    return [...this.slides].filter((slide) => !excludeClones || !slide.hasAttribute("data-clone"));
+  }
+  handleKeyDown(event) {
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+      const target = event.target;
+      const isRtl = this.localize.dir() === "rtl";
+      const isFocusInPagination = target.closest('[part~="pagination-item"]') !== null;
+      const isNext = event.key === "ArrowDown" || !isRtl && event.key === "ArrowRight" || isRtl && event.key === "ArrowLeft";
+      const isPrevious = event.key === "ArrowUp" || !isRtl && event.key === "ArrowLeft" || isRtl && event.key === "ArrowRight";
+      event.preventDefault();
+      if (isPrevious) {
+        this.previous();
+      }
+      if (isNext) {
+        this.next();
+      }
+      if (event.key === "Home") {
+        this.goToSlide(0);
+      }
+      if (event.key === "End") {
+        this.goToSlide(this.getSlides().length - 1);
+      }
+      if (isFocusInPagination) {
+        this.updateComplete.then(() => {
+          const activePaginationItem = this.shadowRoot?.querySelector(
+            '[part~="pagination-item--active"]'
+          );
+          if (activePaginationItem) {
+            activePaginationItem.focus();
+          }
+        });
+      }
+    }
+  }
+  handleScrollEnd() {
+    const slides = this.getSlides();
+    const entries = [...this.intersectionObserverEntries.values()];
+    const firstIntersecting = entries.find((entry) => entry.isIntersecting);
+    if (this.loop && firstIntersecting?.target.hasAttribute("data-clone")) {
+      const clonePosition = Number(firstIntersecting.target.getAttribute("data-clone"));
+      this.goToSlide(clonePosition, "auto");
+      return;
+    }
+    if (firstIntersecting) {
+      this.activeSlide = slides.indexOf(firstIntersecting.target);
+    }
+  }
+  handleSlotChange(mutations) {
+    const needsInitialization = mutations.some(
+      (mutation) => [...mutation.addedNodes, ...mutation.removedNodes].some(
+        (node) => FlowUiCarouselItem.isCarouselItem(node) && !node.hasAttribute("data-clone")
+      )
+    );
+    if (needsInitialization) {
+      this.initializeSlides();
+    }
+    this.requestUpdate();
+  }
+  initializeSlides() {
+    const slides = this.getSlides();
+    const intersectionObserver = this.intersectionObserver;
+    this.intersectionObserverEntries.clear();
+    this.getSlides({ excludeClones: false }).forEach((slide, index) => {
+      intersectionObserver.unobserve(slide);
+      slide.classList.remove("--in-view");
+      slide.classList.remove("--is-active");
+      slide.setAttribute("aria-label", this.localize.term("slideNum", index + 1));
+      if (slide.hasAttribute("data-clone")) {
+        slide.remove();
+      }
+    });
+    if (this.loop) {
+      const slidesPerPage = this.slidesPerPage;
+      const lastSlides = slides.slice(-slidesPerPage);
+      const firstSlides = slides.slice(0, slidesPerPage);
+      lastSlides.reverse().forEach((slide, i) => {
+        const clone = slide.cloneNode(true);
+        clone.setAttribute("data-clone", String(slides.length - i - 1));
+        this.prepend(clone);
+      });
+      firstSlides.forEach((slide, i) => {
+        const clone = slide.cloneNode(true);
+        clone.setAttribute("data-clone", String(i));
+        this.append(clone);
+      });
+    }
+    this.getSlides({ excludeClones: false }).forEach((slide) => {
+      intersectionObserver.observe(slide);
+    });
+    this.goToSlide(this.activeSlide, "auto");
+  }
+  handelSlideChange() {
+    const slides = this.getSlides();
+    slides.forEach((slide, i) => {
+      slide.classList.toggle("--is-active", i === this.activeSlide);
+    });
+    if (this.hasUpdated) {
+      this.emit("flow-ui-slide-change", {
+        detail: {
+          index: this.activeSlide,
+          slide: slides[this.activeSlide]
+        }
+      });
+    }
+  }
+  handleSlidesPerMoveChange() {
+    const slides = this.getSlides({ excludeClones: false });
+    const slidesPerMove = this.slidesPerMove;
+    slides.forEach((slide, i) => {
+      const shouldSnap = Math.abs(i - slidesPerMove) % slidesPerMove === 0;
+      if (shouldSnap) {
+        slide.style.removeProperty("scroll-snap-align");
+      } else {
+        slide.style.setProperty("scroll-snap-align", "none");
+      }
+    });
+  }
+  handleAutoplayChange() {
+    this.autoplayController.stop();
+    if (this.autoplay) {
+      this.autoplayController.start(this.autoplayInterval);
+    }
+  }
+  handleMouseDraggingChange() {
+    this.scrollController.mouseDragging = this.mouseDragging;
+  }
+  /**
+   * Move the carousel backward by `slides-per-move` slides.
+   *
+   * @param behavior - The behavior used for scrolling.
+   */
+  previous(behavior = "smooth") {
+    this.goToSlide(this.activeSlide - this.slidesPerMove, behavior);
+  }
+  /**
+   * Move the carousel forward by `slides-per-move` slides.
+   *
+   * @param behavior - The behavior used for scrolling.
+   */
+  next(behavior = "smooth") {
+    this.goToSlide(this.activeSlide + this.slidesPerMove, behavior);
+  }
+  /**
+   * Scrolls the carousel to the slide specified by `index`.
+   *
+   * @param index - The slide index.
+   * @param behavior - The behavior used for scrolling.
+   */
+  goToSlide(index, behavior = "smooth") {
+    const { slidesPerPage, loop, scrollContainer } = this;
+    const slides = this.getSlides();
+    const slidesWithClones = this.getSlides({ excludeClones: false });
+    const newActiveSlide = (index + slides.length) % slides.length;
+    this.activeSlide = newActiveSlide;
+    const nextSlideIndex = clamp(index + (loop ? slidesPerPage : 0), 0, slidesWithClones.length - 1);
+    const nextSlide = slidesWithClones[nextSlideIndex];
+    const scrollContainerRect = scrollContainer.getBoundingClientRect();
+    const nextSlideRect = nextSlide.getBoundingClientRect();
+    scrollContainer.scrollTo({
+      left: nextSlideRect.left - scrollContainerRect.left + scrollContainer.scrollLeft,
+      top: nextSlideRect.top - scrollContainerRect.top + scrollContainer.scrollTop,
+      behavior: prefersReducedMotion() ? "auto" : behavior
+    });
+  }
+  render() {
+    const { scrollController, slidesPerPage } = this;
+    const pagesCount = this.getPageCount();
+    const currentPage = this.getCurrentPage();
+    const prevEnabled = this.loop || currentPage > 0;
+    const nextEnabled = this.loop || currentPage < pagesCount - 1;
+    const isLtr = this.localize.dir() === "ltr";
+    return html`
+      <div part="base" class="carousel">
+        <div
+          id="scroll-container"
+          part="scroll-container"
+          class="${classMap({
+      carousel__slides: true,
+      "carousel__slides--horizontal": this.orientation === "horizontal",
+      "carousel__slides--vertical": this.orientation === "vertical"
+    })}"
+          style="--slides-per-page: ${this.slidesPerPage};"
+          aria-busy="${scrollController.scrolling ? "true" : "false"}"
+          aria-atomic="true"
+          tabindex="0"
+          @keydown=${this.handleKeyDown}
+          @scrollend=${this.handleScrollEnd}
+        >
+          <slot></slot>
+        </div>
+
+        ${this.navigation ? html`
+              <div part="navigation" class="carousel__navigation">
+                <button
+                  part="navigation-button navigation-button--previous"
+                  class="${classMap({
+      "carousel__navigation-button": true,
+      "carousel__navigation-button--previous": true,
+      "carousel__navigation-button--disabled": !prevEnabled
+    })}"
+                  aria-label="${this.localize.term("previousSlide")}"
+                  aria-controls="scroll-container"
+                  aria-disabled="${prevEnabled ? "false" : "true"}"
+                  @click=${prevEnabled ? () => this.previous() : null}
+                >
+                  <slot name="previous-icon">
+                    <flow-ui-icon library="system" name="${isLtr ? "chevron-left" : "chevron-right"}"></flow-ui-icon>
+                  </slot>
+                </button>
+
+                <button
+                  part="navigation-button navigation-button--next"
+                  class=${classMap({
+      "carousel__navigation-button": true,
+      "carousel__navigation-button--next": true,
+      "carousel__navigation-button--disabled": !nextEnabled
+    })}
+                  aria-label="${this.localize.term("nextSlide")}"
+                  aria-controls="scroll-container"
+                  aria-disabled="${nextEnabled ? "false" : "true"}"
+                  @click=${nextEnabled ? () => this.next() : null}
+                >
+                  <slot name="next-icon">
+                    <flow-ui-icon library="system" name="${isLtr ? "chevron-right" : "chevron-left"}"></flow-ui-icon>
+                  </slot>
+                </button>
+              </div>
+            ` : ""}
+        ${this.pagination ? html`
+              <div part="pagination" role="tablist" class="carousel__pagination" aria-controls="scroll-container">
+                ${map(range(pagesCount), (index) => {
+      const isActive = index === currentPage;
+      return html`
+                    <button
+                      part="pagination-item ${isActive ? "pagination-item--active" : ""}"
+                      class="${classMap({
+        "carousel__pagination-item": true,
+        "carousel__pagination-item--active": isActive
+      })}"
+                      role="tab"
+                      aria-selected="${isActive ? "true" : "false"}"
+                      aria-label="${this.localize.term("goToSlide", index + 1, pagesCount)}"
+                      tabindex=${isActive ? "0" : "-1"}
+                      @click=${() => this.goToSlide(index * slidesPerPage)}
+                      @keydown=${this.handleKeyDown}
+                    ></button>
+                  `;
+    })}
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+}
+FlowUiCarousel.styles = styles;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCarousel.prototype, "loop", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCarousel.prototype, "navigation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCarousel.prototype, "pagination", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], FlowUiCarousel.prototype, "autoplay", 2);
+__decorateClass([
+  property({ type: Number, attribute: "autoplay-interval" })
+], FlowUiCarousel.prototype, "autoplayInterval", 2);
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-page" })
+], FlowUiCarousel.prototype, "slidesPerPage", 2);
+__decorateClass([
+  property({ type: Number, attribute: "slides-per-move" })
+], FlowUiCarousel.prototype, "slidesPerMove", 2);
+__decorateClass([
+  property()
+], FlowUiCarousel.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "mouse-dragging" })
+], FlowUiCarousel.prototype, "mouseDragging", 2);
+__decorateClass([
+  query("slot:not([name])")
+], FlowUiCarousel.prototype, "defaultSlot", 2);
+__decorateClass([
+  query(".carousel__slides")
+], FlowUiCarousel.prototype, "scrollContainer", 2);
+__decorateClass([
+  query(".carousel__pagination")
+], FlowUiCarousel.prototype, "paginationContainer", 2);
+__decorateClass([
+  state()
+], FlowUiCarousel.prototype, "activeSlide", 2);
+__decorateClass([
+  watch("loop", { waitUntilFirstUpdate: true }),
+  watch("slidesPerPage", { waitUntilFirstUpdate: true })
+], FlowUiCarousel.prototype, "initializeSlides", 1);
+__decorateClass([
+  watch("activeSlide")
+], FlowUiCarousel.prototype, "handelSlideChange", 1);
+__decorateClass([
+  watch("slidesPerMove")
+], FlowUiCarousel.prototype, "handleSlidesPerMoveChange", 1);
+__decorateClass([
+  watch("autoplay")
+], FlowUiCarousel.prototype, "handleAutoplayChange", 1);
+__decorateClass([
+  watch("mouseDragging")
+], FlowUiCarousel.prototype, "handleMouseDraggingChange", 1);
+
+export { FlowUiCarousel as default };

package/dist/components/carousel/carousel.mjs

@@ -0,0 +1,5 @@
+import FlowUiCarousel from './carousel.component.mjs';
+
+
+
+export { FlowUiCarousel as default };

package/dist/components/carousel/carousel.styles.mjs

@@ -0,0 +1,162 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles.mjs';
+
+const styles = css`
+  ${componentStyles}
+
+  :host {
+    --slide-gap: var(--flow-ui-spacing-medium, 1rem);
+    --aspect-ratio: 16 / 9;
+    --scroll-hint: 0px;
+
+    display: flex;
+  }
+
+  .carousel {
+    display: grid;
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: 1fr min-content;
+    grid-template-areas:
+      '. slides .'
+      '. pagination .';
+    gap: var(--flow-ui-spacing-medium);
+    align-items: center;
+    min-height: 100%;
+    min-width: 100%;
+    position: relative;
+  }
+
+  .carousel__pagination {
+    grid-area: pagination;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--flow-ui-spacing-small);
+  }
+
+  .carousel__slides {
+    grid-area: slides;
+
+    display: grid;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-items: center;
+    overflow: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
+    border-radius: var(--flow-ui-border-radius-small);
+
+    --slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
+  }
+
+  @media (prefers-reduced-motion) {
+    :where(.carousel__slides) {
+      scroll-behavior: auto;
+    }
+  }
+
+  .carousel__slides--horizontal {
+    grid-auto-flow: column;
+    grid-auto-columns: var(--slide-size);
+    grid-auto-rows: 100%;
+    column-gap: var(--slide-gap);
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: var(--scroll-hint);
+    padding-inline: var(--scroll-hint);
+    overflow-y: hidden;
+  }
+
+  .carousel__slides--vertical {
+    grid-auto-flow: row;
+    grid-auto-columns: 100%;
+    grid-auto-rows: var(--slide-size);
+    row-gap: var(--slide-gap);
+    scroll-snap-type: y mandatory;
+    scroll-padding-block: var(--scroll-hint);
+    padding-block: var(--scroll-hint);
+    overflow-x: hidden;
+  }
+
+  .carousel__slides--dragging,
+  .carousel__slides--dropping {
+    scroll-snap-type: unset;
+  }
+
+  :host([vertical]) ::slotted(flow-ui-carousel-item) {
+    height: 100%;
+  }
+
+  .carousel__slides::-webkit-scrollbar {
+    display: none;
+  }
+
+  .carousel__navigation {
+    grid-area: navigation;
+    display: contents;
+    font-size: var(--flow-ui-font-size-x-large);
+  }
+
+  .carousel__navigation-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: var(--flow-ui-border-radius-small);
+    font-size: inherit;
+    color: var(--flow-ui-color-neutral-600);
+    padding: var(--flow-ui-spacing-x-small);
+    cursor: pointer;
+    transition: var(--flow-ui-transition-medium) color;
+    appearance: none;
+  }
+
+  .carousel__navigation-button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .carousel__navigation-button--disabled::part(base) {
+    pointer-events: none;
+  }
+
+  .carousel__navigation-button--previous {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .carousel__navigation-button--next {
+    grid-column: 3;
+    grid-row: 1;
+  }
+
+  .carousel__pagination-item {
+    display: block;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    border-radius: var(--flow-ui-border-radius-circle);
+    width: var(--flow-ui-spacing-small);
+    height: var(--flow-ui-spacing-small);
+    background-color: var(--flow-ui-color-neutral-300);
+    padding: 0;
+    margin: 0;
+  }
+
+  .carousel__pagination-item--active {
+    background-color: var(--flow-ui-color-neutral-700);
+    transform: scale(1.2);
+  }
+
+  /* Focus styles */
+  .carousel__slides:focus-visible,
+  .carousel__navigation-button:focus-visible,
+  .carousel__pagination-item:focus-visible {
+    outline: var(--flow-ui-focus-ring);
+    outline-offset: var(--flow-ui-focus-ring-offset);
+  }
+`;
+
+export { styles as default };