import { r as t, c as s, h as r, H as l, g as d } from "./index.61732cef.js";
import { c as i } from "./index-orsBiyT_.fc4357c3.js";
import "react";
import "react-dom";
const n = () => ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--hide-scrollbar){scrollbar-width:none}:host(.box--hide-scrollbar)::-webkit-scrollbar{display:none}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}", b = class {
  constructor(e) {
    t(this, e), this.componentLoad = s(this, "componentLoad", 7), this.borderColor = "default", this.overflow = "visible", this.padding = "0", this.scrollState = {
      scrollable: !1,
      scrolledToBottom: !1,
      scrolledToTop: !1
    }, this.onScroll = () => {
      this.updateScrollState();
    };
  }
  connectedCallback() {
    this.needsScrollTracking && this.setupResizeObserver();
  }
  componentDidLoad() {
    this.componentLoad.emit();
  }
  disconnectedCallback() {
    this.teardownResizeObserver();
  }
  onScrollTrackingPropChange() {
    this.needsScrollTracking ? this.setupResizeObserver() : this.teardownResizeObserver();
  }
  setupResizeObserver() {
    var e;
    (e = this.resizeObserver) == null || e.disconnect(), this.resizeObserver = new ResizeObserver(() => this.updateScrollState()), this.resizeObserver.observe(this.el);
  }
  teardownResizeObserver() {
    var e;
    (e = this.resizeObserver) == null || e.disconnect(), this.resizeObserver = void 0;
  }
  get needsScrollTracking() {
    return this.borderedBlockEndWhenScrolled || this.borderedBlockStartWhenScrolled;
  }
  updateScrollState() {
    if (!this.el.isConnected)
      return;
    const e = {
      scrollable: this.el.scrollHeight > this.el.clientHeight,
      scrolledToTop: this.el.scrollTop === 0,
      scrolledToBottom: Math.round(this.el.scrollTop + this.el.clientHeight) >= this.el.scrollHeight
    };
    Object.keys(e).some((o) => e[o] !== this.scrollState[o]) && (this.scrollState = e);
  }
  render() {
    const e = {
      alignItems: this.centerBlock ? "center" : void 0,
      bottom: this.bottom,
      display: this.centerBlock || this.centerInline ? "flex" : void 0,
      flexBasis: this.basis,
      flexShrink: this.shrink,
      flexGrow: this.grow,
      height: this.cover ? "100%" : this.height,
      justifyContent: this.centerInline ? "center" : void 0,
      left: this.left,
      maxHeight: this.maxHeight,
      minHeight: this.minHeight,
      maxWidth: this.maxWidth,
      minWidth: this.minWidth,
      overflow: this.overflow,
      ...this.overflowX && { overflowX: this.overflowX },
      ...this.overflowY && { overflowY: this.overflowY },
      padding: `var(--s-space-${this.padding})`,
      paddingBlockEnd: Boolean(this.paddingBlockEnd) ? `var(--s-space-${this.paddingBlockEnd})` : void 0,
      paddingBlockStart: Boolean(this.paddingBlockStart) ? `var(--s-space-${this.paddingBlockStart})` : void 0,
      paddingInlineEnd: Boolean(this.paddingInlineEnd) ? `var(--s-space-${this.paddingInlineEnd})` : void 0,
      paddingInlineStart: Boolean(this.paddingInlineStart) ? `var(--s-space-${this.paddingInlineStart})` : void 0,
      position: Boolean(this.overflow) || Boolean(this.overflowX) || Boolean(this.overflowY) ? this.position || "relative" : this.position,
      right: this.right,
      top: this.top,
      width: this.cover ? "100%" : this.width,
      zIndex: this.zIndex
    }, o = i("box", `box--border-color-${this.borderColor}`, {
      "box--bordered": this.bordered,
      "box--bordered-block-end": this.borderedBlockEnd,
      "box--bordered-block-end-when-scrolled": this.borderedBlockEndWhenScrolled,
      "box--bordered-block-start": this.borderedBlockStart,
      "box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled,
      "box--bordered-inline-end": this.borderedInlineEnd,
      "box--bordered-inline-start": this.borderedInlineStart,
      "box--cover": this.cover,
      "box--hide-scrollbar": this.hideScrollbar,
      "box--scrollable": this.scrollState.scrollable,
      "box--scrolled-to-top": this.scrollState.scrolledToTop,
      "box--scrolled-to-bottom": this.scrollState.scrolledToBottom
    });
    return r(l, { key: "a4c192db4e7e4de12813372e67c22a2320491905", class: o, onScroll: this.onScroll, style: e }, r("slot", { key: "b74257db054ed117bbf9e2d984f4c6288bebf07e" }));
  }
  get el() {
    return d(this);
  }
  static get watchers() {
    return {
      borderedBlockEndWhenScrolled: [{
        onScrollTrackingPropChange: 0
      }],
      borderedBlockStartWhenScrolled: [{
        onScrollTrackingPropChange: 0
      }]
    };
  }
};
b.style = n();
export {
  b as swirl_box
};
