@mcp-b/web-components 0.2.0

package/dist/carousel-DQITCtEY.d.ts

@@ -0,0 +1,423 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/carousel/carousel.d.ts
+/**
+ * <sigvelo-carousel>
+ *
+ * @summary Displays content in a scrollable horizontal slider with navigation controls.
+ * @tag sigvelo-carousel
+ * @documentation https://design-system.sigvelo.com/docs/components/carousel
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-carousel-item
+ * @dependency sigvelo-sigvelo-icon
+ *
+ * @slot - The default slot for carousel items.
+ *
+ * @csspart items - The scrollable container that holds the carousel items.
+ * @csspart controls - The container that surrounds nav buttons and pagination.
+ * @csspart previous-button - The previous button.
+ * @csspart next-button - The next button.
+ * @csspart pagination - The container for the pagination dots.
+ * @csspart pagination-dot - Each individual pagination dot.
+ * @csspart pagination-dot-active - The active pagination dot.
+ *
+ * @event sigvelo-item-change - Emitted when the active item changes and the slide has been fully scrolled into view.
+ *
+ * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of the carousel. By default, carousels render 100% wide, so
+ *  this helps retain proportions across various devices. Gets applied to the `items` part.
+ * @cssproperty [--item-gap=2rem] - The gap between items in the carousel.
+ * @cssproperty [--dot-size=0.875em] - The size of each pagination dot.
+ * @cssproperty [--dot-gap=0.5em] - The size of the gap between pagination dots.
+ * @cssproperty [--dot-color=var(--sigvelo-color-neutral-bg-muted)] - The color of inactive pagination dots.
+ * @cssproperty [--dot-active-color=var(--sigvelo-color-neutral-bg-strong)] - The color of active pagination dots.
+ *
+ * @cssstate scrolling - Applied when the carousel is scrolling.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-carousel label="Example slides" id="carousel__overview" loop>
+ *   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__overview {
+ *     sigvelo-carousel-item {
+ *       background: var(--sigvelo-color-neutral-bg-subtle);
+ *       color: var(--sigvelo-color-text-muted);
+ *       font-size: 2rem;
+ *       font-weight: 500;
+ *     }
+ *   }
+ * </style>
+ *
+ * <script>
+ *   const carousel = document.getElementById('carousel__overview');
+ *
+ *   carousel.addEventListener('sigvelo-item-change', event => console.log(event.detail.index));
+ * </script>
+ * ```
+ *
+ * @example Providing content
+ * Slot in `<sigvelo-carousel>` items with the content you'd like to show in each slide. Images work well, but you can add just about any content, including interactive elements such as links and buttons.
+ *
+ * By default, the carousel spans 100% of the width and uses a 16/9 aspect ratio. You can adjust this using the `--aspect-ratio` custom property as shown below. For full control over the width and height, you can target the `items` part using CSS.
+ *
+ * ```html
+ * <sigvelo-carousel label="Example slides" id="carousel__providing">
+ *   <sigvelo-carousel-item>
+ *     <sigvelo-card>
+ *       <img slot="media" src="https://images.unsplash.com/photo-1737912031624-e17ba0d7f673?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray and white cat sleeps on a blanket with evening lights in the background">
+ *       <p>Kittens dream of chasing moonbeams across the sky.</p>
+ *       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+ *     </sigvelo-card>
+ *   </sigvelo-carousel-item>
+ *
+ *   <sigvelo-carousel-item>
+ *     <sigvelo-card>
+ *       <img slot="media" src="https://images.unsplash.com/photo-1707520595303-d6b499aa84af?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten sleeps peacefully on the floor">
+ *       <p>Kittens nap to plot their next playful adventure.</p>
+ *       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+ *     </sigvelo-card>
+ *   </sigvelo-carousel-item>
+ *
+ *   <sigvelo-carousel-item>
+ *     <sigvelo-card>
+ *       <img slot="media" src="https://images.unsplash.com/photo-1626603084013-1bf8c6627707?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange cat sleeps peacefully at the edge of a bed">
+ *       <p>Kittens snooze, dreaming of fluffy clouds to leap.</p>
+ *       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+ *     </sigvelo-card>
+ *   </sigvelo-carousel-item>
+ *
+ *   <sigvelo-carousel-item>
+ *     <sigvelo-card>
+ *       <img slot="media" src="https://images.unsplash.com/photo-1664037170371-045dee5604a3?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A sleepy cat looks up in dim, hazy purple lighting">
+ *       <p>Kittens yawn, scheming to pounce on twilight stars.</p>
+ *       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+ *     </sigvelo-card>
+ *   </sigvelo-carousel-item>
+ *
+ *   <sigvelo-carousel-item>
+ *     <sigvelo-card>
+ *       <img slot="media" src="https://images.unsplash.com/photo-1518143099890-1e8a03745563?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray cat curled up but keeping an eye out">
+ *       <p>Kittens curl up, plotting to unravel yarn mysteries.</p>
+ *       <sigvelo-button slot="footer">Learn more</sigvelo-button>
+ *     </sigvelo-card>
+ *   </sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__providing {
+ *     --aspect-ratio: 3 / 4;
+ *     --item-height: fit-content;
+ *     max-width: 360px;
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Setting items by index
+ * Use the `active-index` attribute to set the item that should show initially. The index is zero-based, so the first slide has an index of 0, the second slide has an index of 1, etc.
+ *
+ * ```html
+ * <sigvelo-carousel active-index="2" id="carousel__index">
+ *   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__index {
+ *     sigvelo-carousel-item {
+ *       background: var(--sigvelo-color-neutral-bg-subtle);
+ *       color: var(--sigvelo-color-text-muted);
+ *       font-size: 2rem;
+ *       font-weight: 500;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Setting items by name
+ * You can assign names to carousel items using the `name` attribute. When a carousel item is named, you can use the `active-name` attribute on the carousel to point to the respective item. This is a convenient way to reference specific slides without having to track index numbers.
+ *
+ * ```html
+ * <sigvelo-carousel active-name="fourth" label="Named slides" id="carousel__named">
+ *   <sigvelo-carousel-item name="first">Slide 1</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item name="second">Slide 2</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item name="third">Slide 3</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item name="fourth">Slide 4</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item name="fifth">Slide 5</sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__named {
+ *     sigvelo-carousel-item {
+ *       background: var(--sigvelo-color-neutral-bg-subtle);
+ *       color: var(--sigvelo-color-text-muted);
+ *       font-size: 2rem;
+ *       font-weight: 500;
+ *     }
+ *   }
+ *
+ *   .controls {
+ *     display: flex;
+ *     gap: 1rem;
+ *     justify-content: center;
+ *     margin-top: 1rem;
+ *   }
+ * </style>
+ *
+ * <script>
+ *   const namedCarousel = document.getElementById('carousel__named');
+ *
+ *   namedCarousel.addEventListener('sigvelo-item-change', event => {
+ *     console.log(`Active slide: ${namedCarousel.activeName || 'unnamed'} (index ${event.detail.index})`);
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Looping navigation
+ * Add the `loop` attribute to enable looping when using navigation buttons and arrow keys. This will not cause slides to loop when scrolling.
+ *
+ * ```html
+ * <sigvelo-carousel label="Looping slides" id="carousel__loop" loop>
+ *   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__loop sigvelo-carousel-item {
+ *     background: var(--sigvelo-color-neutral-bg-subtle);
+ *     color: var(--sigvelo-color-text-muted);
+ *     font-size: 2rem;
+ *     font-weight: 500;
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Hiding navigation
+ * You can hide the previous/next buttons by adding the `without-nav` attribute. To hide the pagination dots, use the `without-pagination` attribute.
+ *
+ * ```html
+ * <div id="carousel__without">
+ *   <div class="controls">
+ *     <sigvelo-switch checked label="With nav"></sigvelo-switch><br>
+ *     <sigvelo-switch checked label="With pagination"></sigvelo-switch>
+ *   </div>
+ *
+ *   <sigvelo-carousel>
+ *     <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+ *     <sigvelo-carousel-item>Slide 2</sigvelo-carousel-item>
+ *     <sigvelo-carousel-item>Slide 3</sigvelo-carousel-item>
+ *     <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+ *     <sigvelo-carousel-item>Slide 5</sigvelo-carousel-item>
+ *   </sigvelo-carousel>
+ * </div>
+ *
+ * <script>
+ *   const container = document.getElementById('carousel__without');
+ *   const carousel = container.querySelector('sigvelo-carousel');
+ *   const navSwitch = container.querySelectorAll('sigvelo-switch')[0];
+ *   const paginationSwitch = container.querySelectorAll('sigvelo-switch')[1];
+ *
+ *   navSwitch.addEventListener('input', () => {
+ *     carousel.toggleAttribute('without-nav', !navSwitch.checked);
+ *   });
+ *
+ *   paginationSwitch.addEventListener('input', () => {
+ *     carousel.toggleAttribute('without-pagination', !paginationSwitch.checked);
+ *   });
+ * </script>
+ *
+ * <style>
+ *   #carousel__without {
+ *     display: flex;
+ *     flex-direction: column;
+ *     gap: 1rem;
+ *
+ *     .controls {
+ *       display: flex;
+ *       gap: 1rem;
+ *       justify-content: center;
+ *     }
+ *
+ *     sigvelo-carousel-item {
+ *       background: var(--sigvelo-color-neutral-bg-subtle);
+ *       color: var(--sigvelo-color-text-muted);
+ *       font-size: 2rem;
+ *       font-weight: 500;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Varying widths
+ * You can create carousel items with various widths and max widths by applying the appropriate styles to each item.
+ *
+ * ```html
+ * <sigvelo-carousel label="Cat nap slideshow" id="carousel__varying">
+ *   <sigvelo-carousel-item>Slide 1</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item style="max-width: 350px;">Slide 2</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item style="max-width: 200px;">Slide 3</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>Slide 4</sigvelo-carousel-item>
+ *   <sigvelo-carousel-item style="max-width: 450px;">Slide 5</sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__varying {
+ *     sigvelo-carousel-item {
+ *       background: var(--sigvelo-color-neutral-bg-subtle);
+ *       color: var(--sigvelo-color-text-muted);
+ *       font-size: 2rem;
+ *       font-weight: 500;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * @example Styling carousels
+ * Carousels come with a simple, minimal appearance. Feel free to customize them with your own styles.
+ *
+ * ```html
+ * <sigvelo-carousel id="carousel__styling">
+ *   <sigvelo-carousel-item>
+ *     <img src="https://images.unsplash.com/photo-1737912031624-e17ba0d7f673?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray and white cat sleeps on a blanket with evening lights in the background">
+ *   </sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>
+ *     <img src="https://images.unsplash.com/photo-1707520595303-d6b499aa84af?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A kitten sleeps peacefully on the floor">
+ *   </sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>
+ *     <img src="https://images.unsplash.com/photo-1626603084013-1bf8c6627707?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="An orange cat sleeps peacefully at the edge of a bed">
+ *   </sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>
+ *     <img src="https://images.unsplash.com/photo-1664037170371-045dee5604a3?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A sleepy cat looks up in dim, hazy purple lighting">
+ *   </sigvelo-carousel-item>
+ *   <sigvelo-carousel-item>
+ *     <img src="https://images.unsplash.com/photo-1518143099890-1e8a03745563?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A gray cat curled up but keeping an eye out">
+ *   </sigvelo-carousel-item>
+ * </sigvelo-carousel>
+ *
+ * <style>
+ *   #carousel__styling {
+ *     --dot-size: .75rem;
+ *     --dot-color: #fff4;
+ *     --dot-active-color: white;
+ *
+ *     &::part(items) {
+ *       gap: .5rem;
+ *     }
+ *
+ *     <!-- Previous & next buttons -->
+ *     &::part(previous-button),
+ *     &::part(next-button) {
+ *       position: absolute;
+ *       top: calc(50% - 2.5rem);
+ *       width: 5rem;
+ *       height: 5rem;
+ *       border-radius: var(--sigvelo-radius-md);
+ *       font-size: 1.5rem;
+ *       background: none;
+ *       color: white;
+ *     }
+ *
+ *     &::part(previous-button) {
+ *       left: 0;
+ *     }
+ *
+ *     &::part(next-button) {
+ *       right: 0;
+ *     }
+ *
+ *     &::part(previous-button):disabled,
+ *     &::part(next-button):disabled {
+ *       display: none;
+ *     }
+ *
+ *     <!-- Pagination container -->
+ *     &::part(pagination) {
+ *       position: absolute;
+ *       bottom: 3rem;
+ *       width: 100%;
+ *       justify-content: center;
+ *     }
+ *
+ *     &::part(pagination-dot):focus-visible {
+ *       outline-width: 1.5px;
+ *       outline-offset: 2px;
+ *       outline-color: var(--sigvelo-color-text-muted);
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+declare class SigveloCarousel extends SigveloElement {
+  static styles: CSSResultGroup;
+  private hasInitialized;
+  private isUserInitiated;
+  private localize;
+  private pendingEventDispatch;
+  private resizeObserver;
+  items: HTMLElement;
+  isScrolling: boolean;
+  itemCount: number;
+  /** A custom label for the carousel. This won't be visible, but it will be read to assistive devices. */
+  label: string;
+  /** The current active item's index. */
+  activeIndex: number;
+  /** The current active item's name. */
+  activeName: string;
+  /** Enables looping navigation. When true, prev/next buttons wrap around to the opposite end. */
+  loop: boolean;
+  /** Hides navigation buttons. */
+  withoutNav: boolean;
+  /** Hides pagination dots. */
+  withoutPagination: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Get the items from the default slot */
+  private getItems;
+  private handleSlotChange;
+  /**
+   * Navigate to the selected dot's index
+   */
+  private handleDotClick;
+  /**
+   * Handle keyboard navigation for the pagination dots
+   */
+  private handleDotKeyDown;
+  private handleScrollSnapChanging;
+  private handleScrollSnapChange;
+  private handleScroll;
+  private handleScrollEnd;
+  private handleWheel;
+  /** Sets the active item and scrolls to it */
+  private setActiveItem;
+  private setupResizeObserver;
+  /** Navigate to the specified item. */
+  scrollToIndex(index: number, scrollBehavior?: ScrollBehavior): void;
+  /** Navigate to the next item */
+  scrollToNext(scrollBehavior?: ScrollBehavior): void;
+  /** Navigate to the previous item */
+  scrollToPrevious(scrollBehavior?: ScrollBehavior): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-carousel": SigveloCarousel;
+  }
+}
+//#endregion
+export { SigveloCarousel as t };

package/dist/carousel-item-B5-X31Ha.js

@@ -0,0 +1,79 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/carousel-item/carousel-item.styles.ts
+var carousel_item_styles_default = css`
+  :host {
+    contain: layout style paint;
+    flex: 0 0 100%;
+    height: 100%;
+    transform: translate3d(0, 0, 0);
+    border-radius: var(--sigvelo-radius-md);
+    scroll-snap-align: center;
+    scroll-snap-stop: always;
+  }
+
+  #content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Ensure images cover the entire slide */
+  ::slotted(img) {
+    max-height: 100%;
+    object-fit: cover;
+  }
+
+  /* Ensure elements with controls are contained and visible */
+  ::slotted(iframe),
+  ::slotted(video) {
+    max-height: 100%;
+    object-fit: contain;
+  }
+`;
+//#endregion
+//#region src/components/carousel-item/carousel-item.ts
+/**
+* <sigvelo-carousel-item>
+*
+* @summary Represents individual items used in a carousel.
+* @tag sigvelo-carousel-item
+* @documentation https://design-system.sigvelo.com/docs/components/carousel
+* @status stable
+* @since 1.0
+*
+* @slot - The content to show inside the carousel item.
+*
+* @csspart content - A flex wrapper around the carousel item's content.
+*
+* @example Default
+* This component must only be used within a carousel. You can see some examples of carousel items being used in the carousel documentation.
+*/
+var SigveloCarouselItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.name = "";
+	}
+	static {
+		this.styles = carousel_item_styles_default;
+	}
+	firstUpdated() {
+		this.setAttribute("role", "group");
+		this.setAttribute("aria-roledescription", "slide");
+	}
+	render() {
+		return html`
+      <div id="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property()], SigveloCarouselItem.prototype, "name", void 0);
+customElements.define("sigvelo-carousel-item", SigveloCarouselItem);
+//#endregion
+export { SigveloCarouselItem as t };

package/dist/carousel-item-BB3jL2tk.d.ts

@@ -0,0 +1,34 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/carousel-item/carousel-item.d.ts
+/**
+ * <sigvelo-carousel-item>
+ *
+ * @summary Represents individual items used in a carousel.
+ * @tag sigvelo-carousel-item
+ * @documentation https://design-system.sigvelo.com/docs/components/carousel
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The content to show inside the carousel item.
+ *
+ * @csspart content - A flex wrapper around the carousel item's content.
+ *
+ * @example Default
+ * This component must only be used within a carousel. You can see some examples of carousel items being used in the carousel documentation.
+ */
+declare class SigveloCarouselItem extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** An optional name for the carousel item so you can reference it with the `active-name` attribute. */
+  name: string;
+  firstUpdated(): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-carousel-item": SigveloCarouselItem;
+  }
+}
+//#endregion
+export { SigveloCarouselItem as t };