import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
import { TransitionAnimation } from "@mcp-b/wc-support/utilities/animate";
//#region src/components/transition-group/transition-group.d.ts
/**
 * <sigvelo-transition-group>
 *
 * @summary Improves the user's experience by adding subtle animations as items are added, removed, and reordered in the
 * @tag sigvelo-transition-group
 *  group.
 * @documentation https://design-system.sigvelo.com/docs/components/transition-group
 * @status stable
 * @since 1.0
 *
 * @slot - One or more elements to transition when adding, removing, and reordering the DOM.
 *
 * @event sigvelo-content-changed - Emitted when content changes and before the transition animation begins.
 * @event sigvelo-transition-end - Emitted when transition animations end.
 *
 * @cssstate transitioning - Applied when a transition is active.
 *
 * @cssproperty [--duration=0.25s] - The duration of each individual step (not the total transition time).
 *
 * @example Default
 * Wrap a collection of elements in a transition group and use normal DOM APIs to add, remove, and reorder them. The transition group will automatically apply the appropriate animations as elements enter and exit the group.
 *
 * ```html
 * <div id="transition-group__boxes">
 *   <!-- Add your elements here -->
 *   <sigvelo-transition-group>
 *     <div class="box">1</div>
 *     <div class="box">2</div>
 *     <div class="box">3</div>
 *     <div class="box">4</div>
 *     <div class="box">5</div>
 *     <div class="box">6</div>
 *     <div class="box">7</div>
 *     <div class="box">8</div>
 *   </sigvelo-transition-group>
 *
 *   <div class="buttons">
 *     <sigvelo-button data-action="add">Add random</sigvelo-button>
 *     <sigvelo-button data-action="remove">Remove random</sigvelo-button>
 *     <sigvelo-button data-action="shuffle">Shuffle</sigvelo-button>
 *     <sigvelo-button data-action="disable" toggle="off">Disable transitions</sigvelo-button>
 *   </div>
 * </div>
 *
 * <!-- Everything below is for the demo -->
 * <script>
 *   const container = document.getElementById('transition-group__boxes');
 *   const transitionGroup = container.querySelector('sigvelo-transition-group');
 *   const shuffleButton = container.querySelector('sigvelo-button[data-action="shuffle"]');
 *   const addButton = container.querySelector('sigvelo-button[data-action="add"]');
 *   const removeButton = container.querySelector('sigvelo-button[data-action="remove"]');
 *   const disableButton = container.querySelector('sigvelo-button[data-action="disable"]');
 *   let count = transitionGroup.children.length;
 *
 *   function addRandomBox() {
 *     if (transitionGroup.isTransitioning) return;
 *     const children = [...transitionGroup.children];
 *     const randomSibling = children[Math.floor(Math.random() * children.length)];
 *     const box = document.createElement('div');
 *
 *     box.classList.add('box');
 *     box.textContent = String(++count);
 *
 *     if (randomSibling) {
 *       randomSibling.before(box);
 *     } else {
 *       transitionGroup.append(box)
 *     }
 *   }
 *
 *   function removeRandomBox() {
 *     if (transitionGroup.isTransitioning) return;
 *     const boxes = [...transitionGroup.children];
 *     if (boxes.length > 0) {
 *       const randomIndex = Math.floor(Math.random() * boxes.length);
 *       boxes[randomIndex].remove();
 *     }
 *   }
 *
 *   function shuffleBoxes() {
 *     if (transitionGroup.isTransitioning) return;
 *     const boxes = [...transitionGroup.children];
 *     boxes.sort(() => Math.random() - 0.5);
 *     boxes.forEach(box => transitionGroup.append(box));
 *   }
 *
 *   // Handle button clicks
 *   addButton.addEventListener('click', addRandomBox);
 *   removeButton.addEventListener('click', removeRandomBox);
 *   shuffleButton.addEventListener('click', shuffleBoxes);
 *   disableButton.addEventListener('click', () => {
 *     transitionGroup.disableTransitions = disableButton.toggle !== 'off';
 *   });
 * </script>
 *
 * <style>
 *   #transition-group__boxes {
 *     sigvelo-transition-group {
 *       display: flex;
 *       gap: 1rem;
 *       flex-wrap: wrap;
 *       flex-direction: row;
 *       margin-block-end: 2rem;
 *     }
 *
 *     .buttons {
 *       display: flex;
 *       gap: .5rem;
 *       flex-wrap: wrap;
 *     }
 *
 *     .box {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       width: 100px;
 *       height: 100px;
 *       font-size: 1.5rem;
 *       font-weight: var(--sigvelo-font-weight-semibold);
 *       background: var(--sigvelo-color-primary-bg);
 *       border-radius: var(--sigvelo-radius-md);
 *       color: var(--sigvelo-color-primary-text-on-bg);
 *
 *       @media screen and (max-width: 959px) {
 *         font-size: 1.25rem;
 *         width: 80px;
 *         height: 80px;
 *       }
 *     }
 *   }
 * </style>
 * ```
 *
 * This example includes logic and styles for the demo, but the minimal markup you need for a transition group is shown below. Note that only _direct children_ of the transition group will be animated.
 *
 * ```html
 * <sigvelo-transition-group>
 *   <div class="item">...</div>
 *   <div class="item">...</div>
 *   <div class="item">...</div>
 * </sigvelo-transition-group>
 * ```
 *
 * For best results, avoid applying transitions, animations, and inline styles to transition group items, as they may interfere with the component's animations. Also avoid modifying the DOM _during_ a transition to prevent interruptions.
 *
 * **Note:** Transition groups honor the user's [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) setting. If you're not seeing animations, this might be why. To override this behavior, which is generally not recommended, use the `ignore-reduced-motion` attribute.
 *
 * @example Working with elements
 * Use standard DOM APIs to add, remove, and reorder elements and the transition group will automatically animate your changes. This example demonstrates how adding, removing, and reordering list items will be handled by the transition group.
 *
 * ```html
 * <div id="transition-group__list">
 *   <!-- A template for list items -->
 *   <template>
 *     <div class="list-item">
 *       <span class="label"></span>
 *       <sigvelo-button-group label="Sort">
 *         <sigvelo-button size="sm" data-action="up" icon-label="Move up"><sigvelo-icon name="arrow-up"></sigvelo-icon></sigvelo-button>
 *         <sigvelo-button size="sm" data-action="down" icon-label="Move down"><sigvelo-icon name="arrow-down"></sigvelo-icon></sigvelo-button>
 *       </sigvelo-button-group>
 *       <sigvelo-button size="sm" color="text" data-action="delete" icon-label="Delete"><sigvelo-icon name="trash"></sigvelo-icon></sigvelo-button>
 *     </div>
 *   </template>
 *
 *   <sigvelo-transition-group>
 *     <!-- Items are generated using the <template> above -->
 *   </sigvelo-transition-group>
 *
 *   <form>
 *     <sigvelo-text-field placeholder="New item" variant="filled" pill></sigvelo-text-field>
 *     <sigvelo-button type="submit" color="primary" icon-label="Add to list" pill><sigvelo-icon name="plus"></sigvelo-icon></sigvelo-button>
 *     <sigvelo-divider orientation="vertical"></sigvelo-divider>
 *     <sigvelo-button pill data-action="shuffle">Shuffle</sigvelo-button>
 *   </form>
 * </div>
 *
 * <script>
 *   const container = document.getElementById('transition-group__list');
 *   const transitionGroup = container.querySelector('sigvelo-transition-group');
 *   const template = container.querySelector('template');
 *   const addForm = container.querySelector('form');
 *   const shuffleButton = container.querySelector('[data-action="shuffle"]');
 *   let count = transitionGroup.children.length;
 *
 *   function createListItem(label = '') {
 *     const listItem = template.content.cloneNode(true);
 *     listItem.querySelector('.label').textContent = label;
 *     return listItem;
 *   }
 *
 *   // Create the initial list
 *   if (transitionGroup.children.length === 0) {
 *     ['Feed the cats', 'Change the litter box', 'Buy catnip', 'Playtime'].forEach(label => {
 *       const listItem = createListItem(label);
 *       transitionGroup.append(listItem);
 *       updateListItems();
 *     });
 *   }
 *
 *   // Update the list now that the content has changed
 *   transitionGroup.addEventListener('sigvelo-content-changed', updateListItems);
 *
 *   // Add an item
 *   addForm.addEventListener('submit', event => {
 *     const textField = addForm.querySelector('sigvelo-text-field');
 *     const label = textField.value;
 *     const listItem = createListItem(label || '(Untitled)');
 *     transitionGroup.append(listItem);
 *     textField.value = '';
 *
 *     event.preventDefault();
 *   });
 *
 *   // Shuffle items
 *   shuffleButton.addEventListener('click', () => {
 *     const items = [...transitionGroup.children];
 *     items.sort(() => Math.random() - 0.5);
 *     items.forEach(item => transitionGroup.append(item));
 *   });
 *
 *   // Handle item actions
 *   container.addEventListener('click', event => {
 *     const button = event.target.closest('[data-action]');
 *     if (!button) return;
 *     const action = button.getAttribute('data-action');
 *     const listItem = button.closest('.list-item');
 *
 *     // Delete an item
 *     if (action === 'delete') {
 *       listItem.remove();
 *     }
 *
 *     // Move an item up
 *     if (action === 'up' && listItem.previousElementSibling) {
 *       listItem.previousElementSibling.before(listItem);
 *     }
 *
 *     // Move an item down
 *     if (action === 'down' && listItem.nextElementSibling) {
 *       listItem.nextElementSibling.after(listItem);
 *     }
 *   });
 *
 *   // Make sure the first/last items have the up/down buttons disabled
 *   function updateListItems() {
 *     const listItems = transitionGroup.querySelectorAll('.list-item');
 *
 *     listItems.forEach((listItem, index) => {
 *       listItem.querySelector('[data-action="up"]').disabled = index === 0;
 *       listItem.querySelector('[data-action="down"]').disabled = index === listItems.length - 1;
 *     });
 *   }
 * </script>
 *
 * <style>
 *   #transition-group__list {
 *     sigvelo-transition-group {
 *       display: flex;
 *       flex-direction: column;
 *       gap: .5rem;
 *       margin-block-end: 1rem;
 *     }
 *
 *     form {
 *       display: flex;
 *       gap: .5rem;
 *       align-items: center;
 *
 *       sigvelo-text-field {
 *         flex: 1 1 auto;
 *       }
 *
 *       sigvelo-button {
 *         flex: 0 0 auto;
 *       }
 *
 *       sigvelo-divider {
 *         height: 2rem;
 *       }
 *
 *       sigvelo-text-field::part(label),
 *       sigvelo-text-field::part(description) {
 *         display: none;
 *       }
 *     }
 *
 *     .list-item {
 *       display: flex;
 *       gap: .5rem;
 *       align-items: center;
 *       justify-content: start;
 *       width: 100%;
 *       background-color: var(--sigvelo-color-surface);
 *       border: var(--sigvelo-border-style) var(--sigvelo-border-width) var(--sigvelo-color-neutral-border-subtle);
 *       border-radius: var(--sigvelo-radius-md);
 *       box-shadow: var(--sigvelo-elevation-hairline);
 *       color: var(--sigvelo-color-neutral-text-on-subtle);
 *       padding: .5rem 1rem;
 *
 *       .label {
 *         flex: 1 1 auto;
 *       }
 *
 *       sigvelo-button {
 *         flex: 0 0 auto;
 *       }
 *
 *       sigvelo-button[data-action="delete"] sigvelo-icon {
 *         color: var(--sigvelo-color-danger-text);
 *       }
 *     }
 *   }
 * </style>
 * ```
 *
 * **Note:** As elements are added, removed, and reordered, their positions in the DOM change instantly. The elements are then animated from their old positions to their new positions, meaning CSS selectors such as `:first-child`, `:last-child`, `:nth-child()`, et al will apply as soon as the transition starts, which may not always be desirable. To avoid this, use IDs and classes in lieu of position-based selectors.
 *
 * @example Awaiting transitions
 * Avoid making DOM changes while a transition is running. The `transitionComplete` property holds a promise that resolves when the current or next transition ends. You can await it to be sure all animations are complete before proceeding with further DOM changes.
 *
 * ```html
 * <div id="transition-group__awaiting">
 *   <sigvelo-transition-group style="--duration: 1000ms;">
 *     <div class="box" style="background-color: deeppink;"></div>
 *     <div class="box" style="background-color: dodgerblue;"></div>
 *   </sigvelo-transition-group>
 *
 *   <div class="controls">
 *     <sigvelo-button>Swap</sigvelo-button>
 *   </div>
 * </div>
 *
 * <script>
 *   const container = document.getElementById('transition-group__awaiting');
 *   const transitionGroup = container.querySelector('sigvelo-transition-group');
 *   const swapButton = container.querySelector('sigvelo-button');
 *
 *   swapButton.addEventListener('click', async () => {
 *     const box = transitionGroup.querySelector('.box');
 *
 *     // Disable the button and swap the elements
 *     swapButton.disabled = true;
 *     transitionGroup.append(box);
 *
 *     // Wait for the transition to complete and enable the button
 *     await transitionGroup.transitionComplete();
 *     swapButton.disabled = false;
 *   });
 * </script>
 *
 * <style>
 *   #transition-group__awaiting {
 *     sigvelo-transition-group {
 *       flex-direction: row;
 *       gap: 1rem;
 *     }
 *
 *     .box {
 *       width: 80px;
 *       height: 80px;
 *       border-radius: var(--sigvelo-radius-md);
 *     }
 *
 *     .controls {
 *       margin-block-start: 2rem;
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Changing the layout
 * Transition groups use a columnar flex layout, by default. To change the layout, apply `flex-direction: row` to the transition group. You can add spacing between items by setting the `gap` property.
 *
 * ```css
 * sigvelo-transition-group {
 *   flex-direction: row;
 *   gap: 2rem;
 * }
 * ```
 *
 * For best results, avoid using complex layouts within transition groups.
 *
 * @example Changing the duration
 * To change the animation speed, set the `--duration` custom property on the transition group. Each transition is made up of one or more steps (e.g. add, remove, reposition) and the duration applies to each individual step, not the total transition time.
 *
 * ```html
 * <sigvelo-transition-group style="--duration: 1250ms;" id="transition-group__duration">
 *   <div class="box" style="background-color: deeppink;"></div>
 *   <div class="box" style="background-color: dodgerblue;"></div>
 *   <div class="box" style="background-color: rebeccapurple;"></div>
 *   <div class="box" style="background-color: tomato;"></div>
 * </sigvelo-transition-group>
 *
 * <script>
 *   const transitionGroup = document.getElementById('transition-group__duration');
 *
 *   function moveTheBox() {
 *     const lastChild = transitionGroup.lastElementChild;
 *     if (lastChild) {
 *       transitionGroup.prepend(lastChild);
 *     }
 *   }
 *
 *   // Move the box again after the transition ends
 *   transitionGroup.addEventListener('sigvelo-transition-end', () => {
 *     setTimeout(moveTheBox, 1000);
 *   });
 *
 *   // Ensure the element is registered
 *   Promise.all([
 *     customElements.whenDefined('sigvelo-transition-group'),
 *     transitionGroup.updateComplete
 *   ])
 *   .then(moveTheBox);
 * </script>
 *
 * <style>
 *   #transition-group__duration {
 *     flex-direction: row;
 *     gap: 1rem;
 *
 *     .box {
 *       width: 80px;
 *       height: 80px;
 *       border-radius: var(--sigvelo-radius-md);
 *     }
 *   }
 * </style>
 * ```
 *
 * @example Changing the animation
 * Transition groups use the Web Animations API to move elements around. To customize the enter and exit animations, pass a `TransitionAnimation` object to the transition group's `transitionAnimation` property. The object includes keyframes and easings for entering and exiting:
 *
 * ```ts
 * import type { TransitionAnimation } from '@mcp-b/wc-support/utilities/animate';
 *
 * const elevator: TransitionAnimation = {
 *   enter: {
 *     keyframes: [
 *       { opacity: 0, translate: '0 100%' },
 *       { opacity: 1, translate: '0 0' }
 *     ],
 *     easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
 *   },
 *   exit: {
 *     keyframes: [
 *       { opacity: 1, translate: '0 0' },
 *       { opacity: 0, translate: '0 -100%' }
 *     ],
 *     easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
 *   }
 * };
 *
 * const transitionGroup = document.querySelector('sigvelo-transition-group');
 * transitionGroup.transitionAnimation = elevator;
 * ```
 *
 * @example Disabling transitions
 * Add the `disable-transitions` attribute to disable transition animations. Note that the DOM will still be modified when this option is enabled.
 *
 * ```html
 * <div id="transition-group__disabling">
 *   <sigvelo-transition-group>
 *     <div class="circle" style="background-color: deeppink;"></div>
 *     <div class="circle" style="background-color: dodgerblue;"></div>
 *     <div class="circle" style="background-color: rebeccapurple;"></div>
 *   </sigvelo-transition-group>
 *
 *   <sigvelo-switch label="Disable transitions"></sigvelo-switch>
 * </div>
 *
 * <script>
 *   const container = document.getElementById('transition-group__disabling');
 *   const transitionGroup = container.querySelector('sigvelo-transition-group');
 *   const disableSwitch = container.querySelector('sigvelo-switch');
 *
 *   // Toggle transitions
 *   disableSwitch.addEventListener('sigvelo-change', () => {
 *     transitionGroup.disableTransitions = !transitionGroup.disableTransitions;
 *   });
 *
 *   // Rotate the circles every second
 *   setInterval(() => {
 *     const firstChild = transitionGroup.firstElementChild;
 *     if (firstChild) {
 *       transitionGroup.append(firstChild);
 *     }
 *   }, 1000);
 * </script>
 *
 * <style>
 *   #transition-group__disabling {
 *     text-align: center;
 *
 *     sigvelo-transition-group {
 *       --duration: 500ms;
 *       --easing: ease-in-out;
 *       display: grid;
 *       grid-template-columns: 1fr 1fr;
 *       grid-template-rows: 1fr 1fr;
 *       gap: 60px;
 *       height: 220px;
 *       margin-block-end: 2rem;
 *     }
 *
 *     .circle {
 *       width: 80px;
 *       height: 80px;
 *       border-radius: var(--sigvelo-radius-circle);
 *
 *       &:nth-child(1) {
 *         grid-column: 1 / -1;
 *         grid-row: 1;
 *         justify-self: center;
 *       }
 *
 *       &:nth-child(2) {
 *         grid-column: 1;
 *         grid-row: 2;
 *         justify-self: end;
 *       }
 *
 *       &:nth-child(3) {
 *         grid-column: 2;
 *         grid-row: 2;
 *         justify-self: start;
 *       }
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloTransitionGroup extends SigveloElement {
  static styles: CSSResultGroup;
  private cachedContainerPosition;
  private cachedElementPositions;
  private cachedScrollPosition;
  private currentTransition;
  private isObserving;
  private mutationObserver;
  private resizeObserver;
  /** Determines if the transition group is currently animating. (Property only) */
  isTransitioning: boolean;
  /**
   * A custom enter/exit animation conforming to the `TransitionAnimation` interface.
   * (Property only)
   */
  transitionAnimation?: TransitionAnimation;
  /**
   * By default, the transition group observes and animates its own children. In some cases, you may want it to control
   * another element's children. This is useful in cases where you can't directly wrap child elements with the
   * `<sigvelo-transition-group>` element.
   *
   * For example, if you embed a transition group in a component's shadow root but need it to control slotted (light
   * DOM) elements, you can't simply wrap the slot because the mutation observer can't see projected (slotted) elements.
   * In this case, point this property to the target element and the transition group will hide itself and observe the
   * target container's children instead. (Property only)
   */
  transitionContainer: HTMLElement;
  /**
   * Disables transition animations. However, the `sigvelo-content-changed` and `sigvelo-transition-end` events will still
   * be dispatched.
   */
  disableTransitions: boolean;
  /**
   * By default, no animation will occur when the user indicates a preference for reduced motion. Use this attribute to
   * override this behavior when necessary.
   */
  ignoreReducedMotion: boolean;
  connectedCallback(): void;
  disconnectedCallback(): void;
  firstUpdated(): void;
  updated(changedProperties: PropertyValues<this>): void;
  /**
   * Gets a custom animation based on the users preference. If a custom animation isn't found, the default is returned.
   */
  private getAnimation;
  /**
   * The children this group animates.
   *
   * `children` is a collection of plain `Element`s, and everything the group does to one — hiding it, clearing an
   * inline opacity, animating a laid-out box — is `HTMLElement` vocabulary. Anything else in the container is left
   * where it is rather than quietly mistyped.
   */
  private get animatableChildren();
  private handleMutations;
  private handleResizes;
  private handleVisibilityChange;
  private startObservers;
  private stopObservers;
  /**
   * Returns a promise that resolves when the current transition ends. If no transition is running, it resolves
   * immediately  This is a great way to ensure transitions have stopped before doing something else, such as adding or
   * removing new elements to the transition group.
   */
  transitionComplete(): Promise<void>;
  /**
   * Updates the cached coordinates of all child elements in the transition group. In most cases, you shouldn't have to
   * call this method. However, if you're resizing or animating elements imperatively, you may need to call this
   * immediately before appending or removing elements to ensure a smooth transition.
   */
  updateElementPositions(): void;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-transition-group": SigveloTransitionGroup;
  }
}
//#endregion
export { SigveloTransitionGroup as t };