import "./icon-CTW4Gr4z.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/switch/switch.d.ts
/**
 * <sigvelo-switch>
 *
 * @summary Allows the user to toggle between two mutually exclusive states, such as on and off.
 * @tag sigvelo-switch
 * @documentation https://design-system.sigvelo.com/docs/components/switch
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-icon
 *
 * @slot - The switch's label. For plain-text labels, you can use the `label` attribute instead.
 * @slot description - The switch's description. For plain-text descriptions, you can use the `description` attribute
 *  instead.
 * @slot off-label - The label to show when the switch is off.
 * @slot on-label - The label to show when the switch is on.
 *
 * @event sigvelo-blur - Emitted when the switch loses focus. This event does not bubble.
 * @event sigvelo-change - Emitted when the user commits changes to the switch's value.
 * @event sigvelo-focus - Emitted when the switch receives focus. This event does not bubble.
 * @event sigvelo-input - Emitted when the switch receives input.
 *
 * @csspart label - The `<label>` that wraps the entire control.
 * @csspart description - The element that contains the switch's description.
 * @csspart visual-box - The element that wraps the internal switch.
 * @csspart switch - The internal switch, an `<input type="checkbox" role="switch">` element.
 * @csspart thumb - The switch's thumb.
 * @csspart on-label - The container wrapping the `on-label`.
 * @csspart off-label - The container wrapping the `off-label`.
 *
 * @cssstate disabled - Applied when the switch is disabled.
 * @cssstate focused - Applied when the switch has focus.
 * @cssstate user-valid - Applied when the switch is valid and the user has sufficiently interacted with it.
 * @cssstate user-invalid - Applied when the switch is invalid and the user has sufficiently interacted with it.
 *
 * @example Default
 * ```html
 * <sigvelo-switch name="mode" value="kitten">Kitten mode</sigvelo-switch>
 * ```
 *
 * @example Labels and descriptions
 * The switch's label is provided via its default slot. You can use the `description` attribute to provide a plain text description. If you want to provide HTML, use the `description` slot instead.
 *
 * ```html
 * <sigvelo-switch name="notifications" value="enabled">
 *   Enable notifications
 *   <span slot="description">
 *     Get updates when your cat takes a nap. <a href="#">Learn more</a>
 *   </span>
 * </sigvelo-switch>
 * ```
 *
 * @example Checked initially
 * Add the `checked` attribute to check the switch initially.
 *
 * ```html
 * <sigvelo-switch name="mode" value="kitten" checked>Kitten mode</sigvelo-switch>
 * ```
 *
 *
 * Use the `on` and `off` slots to show inner labels or icons that align with the switch's checked state. Space is very limited, so make sure the labels are short enough to fit.
 *
 * ```html
 * <sigvelo-switch name="mode" value="kitten">
 *   Kitten mode
 *   <span slot="on-label">on</span>
 *   <span slot="off-label">off</span>
 * </sigvelo-switch>
 *
 * <sigvelo-switch name="mode" value="kitten">
 *   Kitten mode
 *   <sigvelo-icon slot="on-label" name="check" label="On"></sigvelo-icon>
 *   <sigvelo-icon slot="off-label" name="x" label="Off"></sigvelo-icon>
 * </sigvelo-switch>
 * ```
 *
 * @example Changing the size
 * Use the `size` attribute to change the text field's size.
 *
 * ```html
 * <sigvelo-switch size="xs">Extra small</sigvelo-switch>
 * <sigvelo-switch size="sm">Small</sigvelo-switch>
 * <sigvelo-switch size="md">Medium</sigvelo-switch>
 * <sigvelo-switch size="lg">Large</sigvelo-switch>
 * <sigvelo-switch size="xl">Extra large</sigvelo-switch>
 * ```
 *
 * @example Disabling
 * Use the `disabled` attribute to disable the switch.
 *
 * ```html
 * <sigvelo-switch disabled>Unchecked and disabled</sigvelo-switch><br>
 * <sigvelo-switch checked disabled>Checked and disabled</sigvelo-switch>
 * ```
 *
 * @example Validation
 * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the switch is checked.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank">
 *   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
 *   <br><br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 * ```
 *
 * @example Using custom validation
 * Use the `setCustomValidity()` method to make the switch invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" id="switch__custom-validation">
 *   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
 *   <br><br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <script type="module">
 *   import { allDefined } from '/dist/sigvelo.js';
 *
 *   await allDefined();
 *
 *   const form = document.getElementById('switch__custom-validation');
 *   const toggle = form.querySelector('sigvelo-switch');
 *
 *   toggle.setCustomValidity('Have you taken a nap first?');
 * </script>
 * ```
 *
 * @example Styling validation
 * You can style valid and invalid switches using the `:valid` and `:invalid` pseudo classes.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="switch__validation-pseudo">
 *   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
 *   <br><br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .switch__validation-pseudo {
 *     sigvelo-switch:valid {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-switch:invalid {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 *
 * However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="switch__validation-custom">
 *   <sigvelo-switch name="sleep" value="zzz" required>Sleep mode</sigvelo-switch>
 *   <br><br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .switch__validation-custom {
 *     sigvelo-switch:state(user-valid) {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-switch:state(user-invalid) {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloSwitch extends SigveloFormControlElement {
  static formAssociated: boolean;
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  protected get focusableAnchor(): HTMLInputElement;
  private switch;
  isInvalid: boolean;
  hadUserInteraction: boolean;
  wasSubmitted: boolean;
  /**
   * The switch's label. If you need to provide HTML in the label, use the `label` slot instead.
   */
  label: string;
  /** The switch's description. If you need to provide HTML in the description, use the `description` slot instead. */
  description: string;
  /** The name of the switch. This will be submitted with the form as a name/value pair. */
  name: string;
  /** The switch's value. */
  value: string;
  /** The switch's checked state. */
  checked: boolean;
  /** Disables the switch. */
  disabled: boolean;
  /** The switch's size. */
  size: "xs" | "sm" | "md" | "lg" | "xl";
  /**
   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   */
  form: string;
  /**
   * Makes the switch required. Form submission will not be allowed until the switch is checked.
   */
  required: boolean;
  updated(changedProperties: PropertyValues<this>): void;
  /** @internal Called when the form is reset. */
  formResetCallback(): void;
  private handleBlur;
  private handleChange;
  private handleInput;
  private handleKeyUp;
  private handleFocus;
  /** Sets the form control's validity */
  private updateValidity;
  /** Sets focus to the switch. */
  focus(): void;
  /** Removes focus from the switch. */
  blur(): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-switch": SigveloSwitch;
  }
}
//#endregion
export { SigveloSwitch as t };