import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/resize-observer/resize-observer.d.ts
/**
 * <sigvelo-resize-observer>
 *
 * @summary Watches child elements and dispatches an event when they resize.
 * @tag sigvelo-resize-observer
 * @documentation https://design-system.sigvelo.com/docs/components/resize
 * @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-resize - Emitted when a slotted element is resized. Like `ResizeObserver`, this event is also dispatched
 *  when each element is first observed. The `event.detail.entry` property contains a
 *  [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) with information about
 *  the element's dimensions.
 *
 * @example Default
 * The component uses a ResizeObserver to monitor the dimensions of its direct children. A `sigvelo-resize` event is dispatched for each observed element, once when the element is first observed and once every time the element is resized.
 *
 * 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="resize__overview">
 *   <sigvelo-resize-observer>
 *     <div class="resizable">
 *       <div class="handle"></div>
 *     </div>
 *   </sigvelo-resize-observer>
 *
 *   <div class="dimensions"></div>
 * </div>
 *
 * <script>
 *   const container = document.getElementById('resize__overview');
 *   const resizeObserver = container.querySelector('sigvelo-resize-observer');
 *
 *   <!-- Log the element's dimensions on resize -->
 *   resizeObserver.addEventListener('sigvelo-resize', event => {
 *     const contentRect = event.detail.entry.contentRect;
 *     const width = Math.round(contentRect.width);
 *     const height = Math.round(contentRect.height);
 *
 *     dimensions.innerHTML = `${width}px &times; ${height}px`;
 *   });
 *
 *   <!-- The code below is just to make the example resizable -->
 *   const resizable = container.querySelector('.resizable');
 *   const handle = container.querySelector('.handle');
 *   const dimensions = container.querySelector('.dimensions');
 *   let isResizing = false;
 *   let startX, startY, startWidth, startHeight;
 *
 *   function startResize(event) {
 *     isResizing = true;
 *     startX = event.clientX;
 *     startY = event.clientY;
 *     startWidth = resizable.offsetWidth;
 *     startHeight = resizable.offsetHeight;
 *     document.addEventListener('pointermove', resize);
 *     document.addEventListener('pointerup', stopResize);
 *     handle.setPointerCapture(event.pointerId);
 *     event.preventDefault();
 *   }
 *
 *   function resize(event) {
 *     if (!isResizing) return;
 *     const width = startWidth + (event.clientX - startX);
 *     const height = startHeight + (event.clientY - startY);
 *
 *     resizable.style.width = `${width}px`;
 *     resizable.style.height = `${height}px`;
 *   }
 *
 *   function stopResize(event) {
 *     if (!isResizing) return;
 *     isResizing = false;
 *     document.removeEventListener('pointermove', resize);
 *     document.removeEventListener('pointerup', stopResize);
 *     handle.releasePointerCapture(event.pointerId);
 *   }
 *
 *   handle.addEventListener('pointerdown', startResize);
 *
 *   // Show initial dimensions
 *   dimensions.innerHTML = `${resizable.clientWidth}px &times; ${resizable.clientHeight}px`;
 * </script>
 *
 * <style>
 *   #resize__overview {
 *     position: relative;
 *     height: 200px;
 *
 *     .resizable {
 *       z-index: 2;
 *       position: relative;
 *       width: 100%;
 *       min-width: 50px;
 *       max-width: 100%;
 *       height: 100%;
 *       min-height: 50px;
 *       max-height: 200px;
 *       border: solid 2px var(--sigvelo-color-neutral-border-subtle);
 *       border-radius: var(--sigvelo-radius-md);
 *     }
 *
 *     .handle {
 *       position: absolute;
 *       bottom: calc(-0.75rem + 1px);
 *       right: calc(-0.75rem + 1px);
 *       width: 1.5rem;
 *       height: 1.5rem;
 *       background-color: var(--sigvelo-color-primary-bg);
 *       border: solid 2px light-dark(white, black);
 *       border-radius: var(--sigvelo-radius-circle);
 *       cursor: nwse-resize;
 *       touch-action: none;
 *     }
 *
 *     .dimensions {
 *       position: absolute;
 *       z-index: 1;
 *       top: calc(50% - 0.5lh);
 *       left: calc(50% - 100px);
 *       width: 200px;
 *       font-size: .9375em;
 *       pointer-events: none;
 *       text-align: center;
 *     }
 *   }
 * </style>
 * ```
 *
 * **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger intersection events.
 *
 * @example Providing content
 * Slot one or more elements into the resize observer and listen for the `sigvelo-resize` event. The event includes `event.detail.entry`, which is a `ResizeObserverEntry` object that corresponds to the observed change.
 *
 * In it's simplest form, a resize observer can be used like this.
 *
 * ```html
 * <sigvelo-resize-observer>
 *   ...
 * </sigvelo-resize-observer>
 *
 * <script>
 *   const resizeObserver = document.querySelector('sigvelo-resize-observer');
 *
 *   // Listen for resizes
 *   resizeObserver.addEventListener('sigvelo-resize', event => {
 *     console.log(event.detail.entry); // ResizeObserverEntry
 *   });
 * </script>
 * ```
 *
 * **Note:** Remember that only direct children of the host element are observed.
 */
declare class SigveloResizeObserver extends SigveloElement {
  static styles: CSSResultGroup;
  private hasInitialized;
  private resizeObserver;
  /** Disables the resize observer. */
  disabled: boolean;
  /** Sets which box model the observer will observe changes to. */
  box: "content-box" | "border-box" | "device-pixel-content-box";
  connectedCallback(): void;
  /** Component lifecycle method that runs when the element disconnects from the DOM */
  disconnectedCallback(): void;
  /** Component lifecycle method that runs when properties change */
  updated(changedProperties: PropertyValues<this>): void;
  private handleSlotChange;
  /** Starts or restarts the resize observer. */
  private startObserver;
  /** Stops the resize observer. */
  private stopObserver;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-resize-observer": SigveloResizeObserver;
  }
}
//#endregion
export { SigveloResizeObserver as t };