import { CSSResultGroup } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/checkbox-group/checkbox-group.d.ts
/**
 * <sigvelo-checkbox-group>
 *
 * @summary Attaches a label and description to a group of related checkboxes or switches.
 * @tag sigvelo-checkbox-group
 * @documentation https://design-system.sigvelo.com/docs/components/checkbox-group
 * @status stable
 * @since 1.0
 *
 * @slot - The checkboxes to place in the group.
 * @slot label - The checkbox's label. For plain-text labels, you can use the `label` attribute instead.
 * @slot description - The checkbox's description. For plain-text descriptions, you can use the `description`
 *  attribute instead.
 *
 * @csspart label - The element that contains the checkbox group's label.
 * @csspart description - The element that contains the checkbox group's description.
 * @csspart group - The element that wraps the grouped checkboxes.
 *
 * @cssproperty [--gap=1em] - The gap between checkboxes.
 *
 * @example Default
 * You can use checkboxes without grouping them but, when you want to apply a label and description to a group of related checkboxes, this component will come in handy.
 *
 * You can also use checkbox groups with toggle icons and toggle tags.
 *
 * ```html
 * <sigvelo-checkbox-group label="Things for the cats" description="Select as few or as many as you'd like.">
 *   <sigvelo-checkbox name="catnip">Catnip</sigvelo-checkbox>
 *   <sigvelo-checkbox name="food">Food</sigvelo-checkbox>
 *   <sigvelo-checkbox name="litter">Litter</sigvelo-checkbox>
 *   <sigvelo-checkbox name="treats">Treats</sigvelo-checkbox>
 * </sigvelo-checkbox-group>
 * ```
 *
 * @example Labels and descriptions
 * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the checkbox group. If you want to provide HTML, use the `label` and `description` slots instead.
 *
 * ```html
 * <sigvelo-checkbox-group label="Things for the cats">
 *   <span slot="description">
 *     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
 *   </span>
 *   <sigvelo-checkbox name="catnip">Catnip</sigvelo-checkbox>
 *   <sigvelo-checkbox name="food">Food</sigvelo-checkbox>
 *   <sigvelo-checkbox name="litter">Litter</sigvelo-checkbox>
 *   <sigvelo-checkbox name="treats">Treats</sigvelo-checkbox>
 * </sigvelo-checkbox-group>
 * ```
 *
 * @example Changing the orientation
 * To stack checkboxes on top of each other instead of side by side, set the `orientation` attribute to `vertical`.
 *
 * ```html
 * <sigvelo-checkbox-group label="Places to hide" orientation="vertical">
 *   <sigvelo-checkbox name="couch">Behind the couch</sigvelo-checkbox>
 *   <sigvelo-checkbox name="backyard">In the backyard</sigvelo-checkbox>
 *   <sigvelo-checkbox name="fridge">On top of the refrigerator</sigvelo-checkbox>
 *   <sigvelo-checkbox name="bed">Under the bed</sigvelo-checkbox>
 * </sigvelo-checkbox-group>
 * ```
 *
 * @example Grouping switches
 * You can also group switches in a checkbox group. For best results, avoid mixing checkboxes and switches in the same group.
 *
 * ```html
 * <sigvelo-checkbox-group
 *   label="Remote control kitty"
 *   description="Toggle an option and watch your cat react instantly!"
 * >
 *   <sigvelo-switch name="eating">Eating</sigvelo-switch>
 *   <sigvelo-switch name="hiding">Hiding</sigvelo-switch>
 *   <sigvelo-switch name="purring">Purring</sigvelo-switch>
 *   <sigvelo-switch name="sleeping">Sleeping</sigvelo-switch>
 * </sigvelo-checkbox-group>
 * ```
 *
 * @example Adding a required indicator
 * Use the `required` attribute to show a required indicator in the checkbox group's label. This just adds a visual indicator. To perform validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" id="checkbox-group__required">
 *   <sigvelo-checkbox-group
 *     label="Things for the cats"
 *     description="Please select at least two items."
 *     required
 *   >
 *     <sigvelo-checkbox name="catnip">Catnip</sigvelo-checkbox>
 *     <sigvelo-checkbox name="food">Food</sigvelo-checkbox>
 *     <sigvelo-checkbox name="litter">Litter</sigvelo-checkbox>
 *     <sigvelo-checkbox name="treats">Treats</sigvelo-checkbox>
 *   </sigvelo-checkbox-group>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 * </form>
 *
 * <script type="module">
 *   import { allDefined } from '/dist/sigvelo.js';
 *
 *   await allDefined();
 *
 *   const form = document.getElementById('checkbox-group__required');
 *   const checkboxes = form.querySelectorAll('sigvelo-checkbox');
 *   const firstCheckbox = checkboxes[0];
 *   const validationMessage = 'Select at least two items before continuing.';
 *
 *   firstCheckbox.setCustomValidity(validationMessage);
 *
 *   // Listen for checkboxes to be checked
 *   form.addEventListener('sigvelo-input', () => {
 *     const numChecked = [...checkboxes].filter(checkbox => checkbox.checked).length;
 *
 *     // If less than two are checked, set the custom validation message. Otherwise, remove it.
 *     if (numChecked < 2) {
 *       firstCheckbox.setCustomValidity(validationMessage);
 *     } else {
 *       firstCheckbox.setCustomValidity('');
 *     }
 *   });
 * </script>
 * ```
 */
declare class SigveloCheckboxGroup extends SigveloElement {
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  /**
   * The checkbox's label. If you need to provide HTML in the label, use the `label` slot instead.
   */
  label: string;
  /**
   * The checkbox's description. If you need to provide HTML in the description, use the `description` slot instead.
   */
  description: string;
  /** The orientation of grouped items. */
  orientation: "horizontal" | "vertical";
  /**
   * Indicates at least one option in the checkbox group is required. This just adds a visual indicator. To perform
   * validation, use the checkbox's `required` attribute and/or `setCustomValidity()` method.
   */
  required: boolean;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-checkbox-group": SigveloCheckboxGroup;
  }
}
//#endregion
export { SigveloCheckboxGroup as t };