import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/mutation-observer/mutation-observer.d.ts
/**
 * <sigvelo-mutation-observer>
 *
 * @summary Watches child elements and dispatches an event when they mutate.
 * @tag sigvelo-mutation-observer
 * @documentation https://design-system.sigvelo.com/docs/components/mutation
 * @status stable
 * @since 1.0
 *
 * @slot - The elements to observe. All direct children of the host element are observed, but not nested elements.
 *
 * @event sigvelo-mutation - Emitted when a slotted element is mutated. The `event.detail.record` property contains a
 *  [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about
 *  the mutation.
 *
 * @example Default
 * The component uses a MutationObserver to monitor when its direct children are added, removed, or modified. A `sigvelo-mutation` event is dispatched for each observed change, providing detailed information about what was mutated.
 *
 * The component is styled with `display: contents`, allowing you to easily apply flex and grid layouts to the containing element without the component interfering.
 *
 * ```html
 * <div id="mutation__overview">
 *   <sigvelo-mutation-observer child-list>
 *     <div class="box">1 <button aria-label="Remove">✕</button></div>
 *     <div class="box">2 <button aria-label="Remove">✕</button></div>
 *     <div class="box">3 <button aria-label="Remove">✕</button></div>
 *   </sigvelo-mutation-observer>
 * </div>
 *
 * <sigvelo-button>Add box</sigvelo-button>
 *
 * <small>Add and remove some items, then open the console to inspect the output.</small>
 *
 * <script>
 *   const container = document.getElementById('mutation__overview');
 *   const mutationObserver = container.querySelector('sigvelo-mutation-observer');
 *   const appendButton = container.nextElementSibling;
 *   let count = mutationObserver.querySelectorAll('.box').length;
 *
 *   // Listen for mutations
 *   mutationObserver.addEventListener('sigvelo-mutation', event => {
 *     console.log(event.detail.record);
 *   });
 *
 *   // Remove a card
 *   mutationObserver.addEventListener('click', event => {
 *     const button = event.target.closest('button');
 *     const box = button?.closest('.box');
 *     box?.remove();
 *   });
 *
 *   // Append a box
 *   appendButton.addEventListener('click', () => {
 *     const html = `<div class="box">${++count} <button aria-label="Remove">✕</button></div>`;
 *     mutationObserver.insertAdjacentHTML('beforeEnd', html);
 *   });
 * </script>
 *
 * <style>
 *   #mutation__overview {
 *     display: flex;
 *     flex-wrap: wrap;
 *     gap: 1.5rem;
 *     min-height: 5rem;
 *     margin-block-end: 1rem;
 *
 *     .box {
 *       display: flex;
 *       align-items: center;
 *       justify-content: center;
 *       position: relative;
 *       min-width: 5rem;
 *       height: 5rem;
 *       border-radius: var(--sigvelo-radius-md);
 *       background-color: var(--sigvelo-color-neutral-bg-subtle);
 *       box-shadow: var(--sigvelo-elevation-hairline);
 *       text-align: center;
 *       padding: 1rem;
 *
 *       button {
 *         display: flex;
 *         align-items: center;
 *         justify-content: center;
 *         background-color: var(--sigvelo-color-neutral-bg-strong);
 *         color: var(--sigvelo-color-neutral-text-on-strong);
 *         font-size: .75em;
 *         padding: 0;
 *         width: 1.25rem;
 *         height: 1.25rem;
 *         min-height: 0;
 *         position: absolute;
 *         top: -0.625rem;
 *         right: -0.625rem;
 *         border-radius: var(--sigvelo-radius-circle);
 *       }
 *     }
 *
 *     ~ small {
 *       display: block;
 *       margin-block-start: 1rem;
 *     }
 *   }
 * </style>
 * ```
 *
 * **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger mutation events unless the `subtree` attribute is enabled.
 *
 * @example Providing content
 * Slot one or more elements into the mutation observer and listen for the `sigvelo-mutation` event. The event includes `event.detail.record`, which is a `MutationRecord` object that corresponds to the mutated element.
 *
 * In its simplest form, a mutation observer can be used like this.
 *
 * ```html
 * <sigvelo-mutation-observer child-list>
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const mutationObserver = document.querySelector('sigvelo-mutation-observer');
 *
 *   // Listen for mutations
 *   mutationObserver.addEventListener('sigvelo-mutation', event => {
 *     console.log(event.detail.record); // MutationRecord
 *   });
 * </script>
 * ```
 *
 * @example Observing attribute changes
 * Use the `attr` attribute to monitor changes to element attributes. You can optionally specify `attr-old-value` to record the previous attribute value.
 *
 * ```html
 * <sigvelo-mutation-observer attr attr-old-value>
 *   <div id="target" class="example">Watch my attributes</div>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const observer = document.querySelector('sigvelo-mutation-observer');
 *   const target = observer.querySelector('#target');
 *
 *   observer.addEventListener('sigvelo-mutation', event => {
 *     const record = event.detail.record;
 *     console.log(`Attribute "${record.attributeName}" changed`);
 *     console.log(`Old value: ${record.oldValue}`);
 *     console.log(`New value: ${record.target.getAttribute(record.attributeName)}`);
 *   });
 *
 *   // Change an attribute to trigger the observer
 *   target.className = 'modified';
 * </script>
 * ```
 *
 * @example Filtering specific attributes
 * Limit observations to specific attributes using the `attr-filter` attribute. Separate multiple attribute names with spaces.
 *
 * ```html
 * <sigvelo-mutation-observer attr attr-filter="class data-state">
 *   <div class="example" data-state="active" id="example">
 *     Only class and data-state changes are observed
 *   </div>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const observer = document.querySelector('sigvelo-mutation-observer');
 *   const target = observer.querySelector('#example');
 *
 *   observer.addEventListener('sigvelo-mutation', event => {
 *     console.log(`Observed attribute: ${event.detail.record.attributeName}`);
 *   });
 *
 *   // These will trigger events
 *   target.className = 'modified';
 *   target.setAttribute('data-state', 'inactive');
 *
 *   // This will NOT trigger an event
 *   target.id = 'new-id';
 * </script>
 * ```
 *
 * @example Observing text content changes
 * Use the `character-data` attribute to monitor changes to text nodes. The `character-data-old-value` attribute records the previous text content.
 *
 * ```html
 * <sigvelo-mutation-observer character-data character-data-old-value subtree>
 *   <p id="text-content">Original text content</p>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const observer = document.querySelector('sigvelo-mutation-observer');
 *   const paragraph = observer.querySelector('#text-content');
 *
 *   observer.addEventListener('sigvelo-mutation', event => {
 *     const record = event.detail.record;
 *     console.log(`Text changed from "${record.oldValue}" to "${record.target.textContent}"`);
 *   });
 *
 *   // Change text content to trigger the observer
 *   paragraph.textContent = 'Updated text content';
 * </script>
 * ```
 *
 * @example Observing nested elements
 * By default, only direct children are observed. Add the `subtree` attribute to observe changes in nested elements as well.
 *
 * ```html
 * <sigvelo-mutation-observer child-list subtree>
 *   <div class="container">
 *     <div class="nested">
 *       <span>Nested content</span>
 *     </div>
 *   </div>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const observer = document.querySelector('sigvelo-mutation-observer');
 *   const nested = observer.querySelector('.nested');
 *
 *   observer.addEventListener('sigvelo-mutation', event => {
 *     console.log('Mutation detected in subtree:', event.detail.record);
 *   });
 *
 *   // This will trigger the observer even though span is deeply nested
 *   nested.innerHTML = '<span>New nested content</span>';
 * </script>
 * ```
 *
 * @example Combining multiple observation types
 * You can observe multiple types of mutations simultaneously by combining attributes.
 *
 * ```html
 * <sigvelo-mutation-observer
 *   child-list
 *   attr
 *   character-data
 *   subtree
 *   attr-old-value
 *   character-data-old-value
 * >
 *   <div class="comprehensive-example">
 *     <p>This observer watches everything</p>
 *   </div>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const observer = document.querySelector('sigvelo-mutation-observer');
 *
 *   observer.addEventListener('sigvelo-mutation', event => {
 *     const record = event.detail.record;
 *
 *     switch (record.type) {
 *       case 'childList':
 *         console.log('Child nodes changed');
 *         break;
 *       case 'attributes':
 *         console.log(`Attribute "${record.attributeName}" changed`);
 *         break;
 *       case 'characterData':
 *         console.log('Text content changed');
 *         break;
 *     }
 *   });
 * </script>
 * ```
 *
 * @example Disabling the observer
 * Use the `disabled` attribute to temporarily stop observing mutations without removing the component.
 *
 * ```html
 * <sigvelo-mutation-observer child-list disabled>
 *   <div>Changes to this content won't be observed</div>
 * </sigvelo-mutation-observer>
 *
 * <script>
 *   const observer = document.querySelector('sigvelo-mutation-observer');
 *
 *   // Re-enable observation
 *   observer.disabled = false;
 *
 *   // Disable observation again
 *   observer.disabled = true;
 * </script>
 * ```
 */
declare class SigveloMutationObserver extends SigveloElement {
  static styles: CSSResultGroup;
  private mutationObserver;
  /** Disables the mutation observer. */
  disabled: boolean;
  /** Indicates whether attributes should be observed. */
  attr: boolean;
  /** Indicates whether attribute old value should be recorded. */
  attrOldValue: boolean;
  /**
   * One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
   * observed.
   */
  attrFilter: string;
  /** Indicates whether mutations to target's children are to be observed. */
  childList: boolean;
  /** Indicates whether mutations to target's descendants are to be observed. */
  subtree: boolean;
  /** Indicates whether character data should be observed. */
  characterData: boolean;
  /** Indicates whether character data old value should be recorded. */
  characterDataOldValue: boolean;
  connectedCallback(): void;
  disconnectedCallback(): void;
  updated(changedProperties: PropertyValues<this>): void;
  /** Starts or restarts the mutation observer. */
  private startObserver;
  /** Stops the mutation observer. */
  private stopObserver;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-mutation-observer": SigveloMutationObserver;
  }
}
//#endregion
export { SigveloMutationObserver as t };