import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/splitter/splitter.d.ts
/**
 * <sigvelo-splitter>
 *
 * @summary A draggable splitter that separates two panels, allowing users to resize them.
 * @tag sigvelo-splitter
 * @documentation https://design-system.sigvelo.com/docs/components/splitter
 * @status stable
 * @since 1.0
 *
 * @slot start - The content for the primary (start) panel.
 * @slot end - The content for the secondary (end) panel.
 * @slot handle - The draggable handle that separates the panels.
 *
 * @event sigvelo-resize - Dispatched when the splitter's handle is moved.
 *
 * @csspart start - The content to show in the first (start) panel.
 * @csspart end - The content to show in the second (end) panel.
 * @csspart divider - The draggable divider that separates the panels.
 * @csspart handle - The visual handle within the divider (only present when not using the `handle` slot).
 *
 * @cssstate disabled - Applied when the splitter is disabled.
 * @cssstate dragging - Applied when the splitter is being dragged.
 * @cssstate focused - Applied when the splitter has focus.
 *
 * @cssproperty [--divider-min-position=0%] - Minimum position of the divider (as a percentage or pixel value).
 * @cssproperty [--divider-max-position=100%] - Maximum position of the divider (as a percentage or pixel value).
 * @cssproperty [--divider-draggable-area=1rem] - The size of the divider's draggable area (can be larger than the
 *  visible area).
 * @cssproperty [--divider-width=0.125rem] - The width of the visual divider.
 *
 * @example Default
 * Splitters follow the ARIA APG window splitter pattern for accessibility. They consist of a draggable separator positioned between two resizable panels.
 *
 * ```html
 * <sigvelo-splitter id="splitter__overview">
 *   <div slot="start">Start panel</div>
 *   <div slot="end">End panel</div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__overview {
 *     height: 200px;
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 *
 *
 *
 * You can set the initial position of the divider using the `position` attribute or update it programmatically via JavaScript. The value is a number from 0 to 1 representing the divider's position as a percentage.
 *
 * ```html
 * <sigvelo-splitter position=".75" id="splitter__position">
 *   <div slot="start">Start panel</div>
 *   <div slot="end">End panel</div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__position {
 *     height: 200px;
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Constraining the divider
 * Set the `--divider-min-position` and `--divider-max-position` custom properties to limit the range of the divider's movement. In this example, the divider is constrained between 25% and 75% of the splitter's size.
 *
 * ```html
 * <sigvelo-splitter style="--divider-min-position: 25%; --divider-max-position: 75%;" id="splitter__constraints">
 *   <div slot="start">Start panel</div>
 *   <div slot="end">End panel</div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__constraints {
 *     height: 200px;
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Changing the orientation
 * Set the `orientation` attribute to `vertical` to change the splitter's orientation.
 *
 * ```html
 * <sigvelo-splitter orientation="vertical" id="splitter__orientation">
 *   <div slot="start">Start panel</div>
 *   <div slot="end">End panel</div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__orientation {
 *     height: 400px;
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Snapping
 * Set the `snap` attribute to a space-separated list of positions at which to snap. Only percentages are supported, e.g. `snap="25% 50% 75%"`. Use the `snap-threshold` attribute to change the proximity at which snapping occurs.
 *
 * ```html
 * <div id="splitter__snap">
 *   <sigvelo-splitter snap="25% 50% 75%">
 *     <div slot="start">Start panel</div>
 *     <div slot="end">End panel</div>
 *   </sigvelo-splitter>
 *
 *   <div class="snap-dots">
 *     <span class="snap-dot" style="left: 25%;"></span>
 *     <span class="snap-dot" style="left: 50%;"></span>
 *     <span class="snap-dot" style="left: 75%;"></span>
 *   </div>
 * </div>
 *
 * <style>
 *   #splitter__snap {
 *     sigvelo-splitter {
 *       height: 200px;
 *     }
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *
 *     .snap-dots {
 *       position: relative;
 *       width: 100%;
 *       margin-top: .5rem;
 *     }
 *
 *     .snap-dot {
 *       position: absolute;
 *       width: 4px;
 *       height: 4px;
 *       background-color: gray;
 *       border-radius: var(--sigvelo-radius-circle);
 *       transform: translateX(-50%);
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Disabling
 * When the `disabled` attribute is set, the divider cannot be dragged or focused and the handle is hidden, though the divider line remains visible.
 *
 * ```html
 * <sigvelo-splitter disabled id="splitter__disabled">
 *   <div slot="start">Start panel</div>
 *   <div slot="end">End panel</div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__disabled {
 *     height: 200px;
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Nested splitters
 * Splitters can be nested to create advanced layouts.
 *
 * ```html
 * <sigvelo-splitter id="splitter__nested">
 *   <div slot="start">
 *     Panel 1
 *   </div>
 *   <div slot="end">
 *     <sigvelo-splitter orientation="vertical">
 *       <div slot="start">
 *         Panel 2
 *       </div>
 *       <div slot="end">
 *         Panel 3
 *       </div>
 *     </sigvelo-splitter>
 *   </div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__nested {
 *     height: 300px;
 *
 *     sigvelo-splitter {
 *       height: 100%;
 *       border-radius: 0;
 *       border: none;
 *
 *       > div {
 *         height: 100%;
 *       }
 *     }
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Styling the divider
 * You can customize the divider by slotting content such as an icon into the `handle` slot. To change the divider's width, set the `--divider-width` custom property.
 *
 * ```html
 * <sigvelo-splitter style="height: 200px;" id="splitter__custom-divider">
 *   <div slot="start">Start panel</div>
 *   <sigvelo-icon slot="handle" name="grip-vertical"></sigvelo-icon>
 *   <div slot="end">End panel</div>
 * </sigvelo-splitter>
 *
 * <style>
 *   #splitter__custom-divider {
 *     --divider-width: 1rem;
 *
 *     <!-- Center the text for the demo -->
 *     [slot="start"],
 *     [slot="end"] {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       height: 100%;
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloSplitter extends SigveloElement {
  static styles: CSSResultGroup;
  private localize;
  private dragHandler?;
  private previousPosition;
  private dragStartPosition;
  private dragStartClientX;
  private dragStartClientY;
  private divider;
  isCollapsed: boolean;
  isDragging: boolean;
  /** The current position of the divider as a decimal (0-1). */
  position: number;
  /** The orientation of the splitter. */
  orientation: "horizontal" | "vertical";
  /** Disables the splitter, preventing it from being focused and resized. */
  disabled: boolean;
  /** A space-separated list of percentage snap points, e.g. "25% 50% 75%". */
  snap: string;
  /** The maximum distance (in pixels) within which the divider will snap to a specified snap point. */
  snapThreshold: number;
  connectedCallback(): void;
  firstUpdated(): void;
  updated(changedProperties: PropertyValues<this>): void;
  disconnectedCallback(): void;
  private handleFocus;
  private handleBlur;
  private getSnapPoints;
  private snapToNearest;
  private getDividerConstraint;
  private clampPosition;
  private setupDragging;
  private updateGridTemplate;
  private updateAriaValue;
  private handleKeydown;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-splitter": SigveloSplitter;
  }
}
//#endregion
export { SigveloSplitter as t };