import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/navicon/navicon.d.ts
/**
 * <sigvelo-navicon>
 *
 * @summary A navicon, or "hamburger button", is a special button used to control mobile navigation menus.
 * @tag sigvelo-navicon
 * @documentation https://design-system.sigvelo.com/docs/components/navicon
 * @status stable
 * @since 1.0
 *
 * @event sigvelo-blur - Emitted when the navicon loses focus. This event does not bubble.
 * @event sigvelo-focus - Emitted when the navicon receives focus. This event does not bubble.
 *
 * @csspart line - The individual lines that make up the navicon symbol.
 * @csspart line-top - The top line.
 * @csspart line-middle - The middle line (hamburger symbol only).
 * @csspart line-bottom - The bottom line.
 *
 * @cssstate expanded - Applied when the navicon is toggled on.
 * @cssstate disabled - Applied when the navicon is disabled.
 * @cssstate focused - Applied when the navicon has focus.
 *
 * @cssproperty [--dot-size=0.125em] - The width of each dot. Available when symbol is `vertical-dots` or `horizontal-dots`.
 * @cssproperty [--line-width=0.0625em] - The width of each line. Available when symbol is `hamburger` or `equals`.
 * @cssproperty [--line-transition-duration=200ms] - The duration of the symbol's animation.
 * @cssproperty [--line-transition-easing=cubic-bezier(0.4, 0, 0.2, 1)] - The easing to use for the symbol's animation.
 * @cssproperty [--dot-size=0.125em] - The size of the dots in the dots symbol.
 *
 * @example Default
 * ```html
 * <sigvelo-navicon label="Toggle menu" style="font-size: 1.75rem;"></sigvelo-navicon>
 * ```
 *
 * @example Associating a menu
 * To associate the navicon with a navigation menu, add `for="id"`, where `id` is the ID of the nav menu that will show/hide when toggled. This tells assistive devices which element the navicon controls. The nav menu must exist in the same document as the navicon to work correctly.
 *
 * ```html
 * <sigvelo-navicon for="nav-menu"></sigvelo-navicon>
 *
 * <!-- The navicon will toggle this element -->
 * <nav id="nav-menu">
 *   ...
 * </nav>
 * ```
 *
 * **The navicon does not show or hide the menu for you.** You must add your own JavaScript and/or CSS to toggle it. You can listen for the `click` event and manage things with JavaScript.
 *
 * ```js
 * const navicon = document.querySelector('sigvelo-navicon');
 *
 * navicon.addEventListener('click', () => {
 *   if (navicon.expanded) {
 *     // Show the menu
 *   } else {
 *     // Hide the menu
 *   }
 * });
 * ```
 *
 * For a CSS-only solution, try using the `:has()` selector combined with `:state(expanded)` to target the nav menu when the navicon is expanded.
 *
 * ```css
 * #nav-menu {
 *   <!-- Hidden menu styles -->
 * }
 *
 * body:has(sigvelo-navicon:state(expanded)) #nav-menu {
 *   <!-- Visible menu styles -->
 * }
 * ```
 *
 * @example Customizing the label
 * By default, the navicon's accessible label is a localized version of the phrase "toggle navigation." Use the `label` attribute to provide your own label. Labels aren't displayed on the screen, but they're announced by assistive devices.
 *
 * ```html
 * <sigvelo-navicon label="View mobile menu" style="font-size: 1.75rem;"></sigvelo-navicon>
 * ```
 *
 * @example Changing the symbol
 * Use the `symbol` attribute to choose between the `hamburger`, `equals`, `horizontal-dots`, and `vertical-dots` symbols.
 *
 * ```html
 * <div style="font-size: 1.75rem;">
 *   <sigvelo-navicon symbol="hamburger"></sigvelo-navicon>
 *   <sigvelo-navicon symbol="equals"></sigvelo-navicon>
 *   <sigvelo-navicon symbol="horizontal-dots"></sigvelo-navicon>
 *   <sigvelo-navicon symbol="vertical-dots"></sigvelo-navicon>
 * </div>
 * ```
 *
 * @example Changing the size
 * Navicons are sized based on the current font size. You can make them bigger or smaller by changing the `font-size` property on the component or an ancestor. A good default size is 1.75rem, which equals 28&times;28px with a 16px root size.
 *
 * ```html
 * <sigvelo-navicon style="font-size: 1rem;"></sigvelo-navicon>
 * <sigvelo-navicon style="font-size: 1rem;" symbol="equals"></sigvelo-navicon>
 * <sigvelo-navicon style="font-size: 1rem;" symbol="horizontal-dots"></sigvelo-navicon>
 * <sigvelo-navicon style="font-size: 1rem;" symbol="vertical-dots"></sigvelo-navicon>
 * <br><br>
 * <sigvelo-navicon style="font-size: 3rem;"></sigvelo-navicon>
 * <sigvelo-navicon style="font-size: 3rem;" symbol="equals" ></sigvelo-navicon>
 * <sigvelo-navicon style="font-size: 3rem;" symbol="horizontal-dots" ></sigvelo-navicon>
 * <sigvelo-navicon style="font-size: 3rem;" symbol="vertical-dots" ></sigvelo-navicon>
 * ```
 *
 * @example Changing the color
 * Set the `color` CSS property to control the color of the navicon.
 *
 * ```html
 * <div style="font-size: 1.75rem;">
 *   <sigvelo-navicon style="color: deeppink;"></sigvelo-navicon>
 *   <sigvelo-navicon symbol="equals" style="color: dodgerblue;"></sigvelo-navicon>
 *   <sigvelo-navicon symbol="horizontal-dots" style="color: seagreen;"></sigvelo-navicon>
 *   <sigvelo-navicon symbol="vertical-dots" style="color: tomato;"></sigvelo-navicon>
 * </div>
 * ```
 *
 * @example Disabling
 * Use the `disabled` attribute to disable the navicon.
 *
 * ```html
 * <sigvelo-navicon disabled style="font-size: 1.75rem;"></sigvelo-navicon>
 * ```
 */
declare class SigveloNavicon extends SigveloElement {
  static styles: CSSResultGroup;
  private localize;
  /**
   * The ID of the associated menu that gets shown/hidden when the navicon is toggled. The element must be in the same
   * document as the navicon.
   */
  for: string;
  /** Determines if the navicon is toggled on. */
  expanded: boolean;
  /** Determines the navicon's symbol. */
  symbol: "hamburger" | "equals" | "horizontal-dots" | "vertical-dots";
  /** Disables the navicon. */
  disabled: boolean;
  /** The accessible label for the navicon. */
  label: string;
  connectedCallback(): void;
  disconnectedCallback(): void;
  updated(changedProperties: PropertyValues<this>): void;
  private handleBlur;
  private handleFocus;
  private handleClick;
  private handleKeyDown;
  render(): import("lit-html").TemplateResult;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-navicon": SigveloNavicon;
  }
}
//#endregion
export { SigveloNavicon as t };