import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/scroll-area/scroll-area.d.ts
/**
 * <sigvelo-scroll-area>
 *
 * @summary A container with styled scrollbars.
 * @tag sigvelo-scroll-area
 * @status experimental
 * @since 1.0
 *
 * @slot - The scrollable content.
 *
 * @cssproperty [--thumb-color=var(--sigvelo-color-neutral-bg)] - The scrollbar thumb color.
 * @cssproperty [--thumb-hover-color] - The scrollbar thumb color on hover.
 * @cssproperty [--track-color=transparent] - The scrollbar track color.
 * @cssproperty [--scroll-area-height=auto] - The height of the scroll area.
 *
 * @csspart viewport - The scrollable viewport container.
 *
 * @example Default
 * ```html
 * <sigvelo-scroll-area style="--scroll-area-height: 200px;">
 *   <div style="padding: 1rem;">
 *     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
 *     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 *     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 *     <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 *     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
 *     <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
 *   </div>
 * </sigvelo-scroll-area>
 * ```
 *
 * @example Horizontal scrolling
 * ```html
 * <sigvelo-scroll-area orientation="horizontal" style="--scroll-area-height: auto;">
 *   <div style="display: flex; gap: 1rem; padding: 1rem; width: max-content;">
 *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
 *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-muted); border-radius: var(--sigvelo-radius-md);"></div>
 *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
 *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-muted); border-radius: var(--sigvelo-radius-md);"></div>
 *     <div style="width: 200px; height: 100px; background: var(--sigvelo-color-primary-bg-subtle); border-radius: var(--sigvelo-radius-md);"></div>
 *   </div>
 * </sigvelo-scroll-area>
 * ```
 */
declare class SigveloScrollArea extends SigveloElement {
  static styles: CSSResultGroup;
  /** Which axis to allow scrolling on. */
  orientation: "vertical" | "horizontal" | "both";
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-scroll-area": SigveloScrollArea;
  }
}
//#endregion
export { SigveloScrollArea as t };