import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/divider/divider.d.ts
/**
 * <sigvelo-divider>
 *
 * @summary Separates and groups content visually.
 * @tag sigvelo-divider
 * @documentation https://design-system.sigvelo.com/docs/components/divider
 * @status stable
 * @since 1.0
 *
 * @slot symbol - Optional text or a symbol to show in the center of the divider.
 *
 * @cssproperty [--color=var(--sigvelo-color-neutral-border-muted)] - The color of the divider.
 * @cssproperty [--spacing=1rem] - The spacing around the divider.
 * @cssproperty [--thickness=var(--sigvelo-border-width)] - The thickness of the divider.
 *
 * @csspart symbol - The container that wraps the slotted symbol or icon.
 *
 * @example Default
 * ```html
 * <sigvelo-divider></sigvelo-divider>
 * ```
 *
 * @example Adding symbols
 * Add a decorative symbol or icon in the middle of the divider with the `symbol` slot. Symbols are presentational content, meaning they won't be announced by screen readers.
 *
 * ```html
 * <sigvelo-divider>
 *   <sigvelo-icon slot="symbol" name="circle"></sigvelo-icon>
 * </sigvelo-divider>
 *
 * <sigvelo-divider>
 *   <span slot="symbol">§</span>
 * </sigvelo-divider>
 *
 * <sigvelo-divider>
 *   <span slot="symbol" style="font-size: .875rem;">break</span>
 * </sigvelo-divider>
 * ```
 *
 * @example Changing the orientation
 * Set the `orientation` attribute to `vertical` for a vertical orientation. This is best used inside of flex containers.
 *
 * ```html
 * <div style="display: flex; align-items: center;">
 *   <span>First</span>
 *   <sigvelo-divider orientation="vertical"></sigvelo-divider>
 *   <span>Second</span>
 *   <sigvelo-divider orientation="vertical"></sigvelo-divider>
 *   <span>Third</span>
 * </div>
 * ```
 *
 * @example Styling dividers
 * Use the `--color`, `--spacing`, and `--thickness` CSS properties to change the divider's variant.
 *
 * ```html
 * <sigvelo-divider style="--color: royalblue; --thickness: 4px;"></sigvelo-divider>
 * ```
 */
declare class SigveloDivider extends SigveloElement {
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  /** Sets the divider's orientation. */
  orientation: "horizontal" | "vertical";
  firstUpdated(): void;
  updated(changedProperties: PropertyValues<this>): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-divider": SigveloDivider;
  }
}
//#endregion
export { SigveloDivider as t };