@sky.ui/core 0.0.23 → 0.0.25

package/dist/sky-dialog/sky-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-dialog.js","sources":["../../src/sky-dialog/sky-dialog.ts"],"sourcesContent":[null],"names":["_dialogOpenCount","_savedScrollY","SkyDialog","LitElement","this","dependencies","SkyIcon","styles","css","constructor","super","open","closable","message","overlay","width","separator","persistent","closeOnEsc","headerPadding","bodyPadding","footerPadding","highlightOnOutsideClick","_hasHeader","_hasBody","_hasFooter","_isClosing","_openAnimation","_closeAnimation","_highlightAnimation","dialogRef","createRef","_onBackdropPointerDown","event","dialog","dialogElement","target","_highlightDialog","_requestClose","_onNativeClose","requestAnimationFrame","showModal","_onHeaderSlotChange","e","slot","_slotHasContent","_onBodySlotChange","_onFooterSlotChange","_onKeyDown","key","preventDefault","stopPropagation","_handleCancel","bind","firstUpdated","d","addEventListener","capture","disconnectedCallback","removeEventListener","_unlockScroll","close","show","hide","focusDialog","focus","getDialogElement","updated","changedProps","has","_handleOpenChange","get","previousOpen","_lockScroll","_animateOpen","_animateClose","window","document","scrollY","scrollTo","documentElement","setAttribute","Math","max","removeAttribute","_prefersReducedMotion","matchMedia","matches","cancel","duration","animation","animate","opacity","transform","transformOrigin","easing","fill","onfinish","dispatchEvent","CustomEvent","bubbles","composed","reason","detail","assignedNodes","flatten","some","n","nodeType","Node","TEXT_NODE","textContent","trim","render","valid","none","xs","sm","md","lg","xl","hp","bp","fp","headerClasses","footerClasses","html","ref","keyframeOptions","when","classMap","__decorate","property","type","Boolean","reflect","prototype","String","state","query","HTMLDialogElement","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-dialog.js","sources":["../../src/sky-dialog/sky-dialog.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { when } from \"lit/directives/when.js\";\nimport { ref, createRef } from \"lit/directives/ref.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { animate } from \"@lit-labs/motion\";\nimport { SkyIcon } from \"../sky-icon/sky-icon.js\";\n\nexport type SkyDialogPadding = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type SkyDialogRequestCloseDetail = { reason: \"backdrop\" | \"escape\" | \"close-button\" };\n/** Shared scroll lock state so multiple dialogs don't double-restore scroll. */\nlet _dialogOpenCount = 0;\nlet _savedScrollY = 0;\n\n/**\n * @element sky-dialog\n *\n * @summary Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://library.sky-ui.com/components/dialog\n * @dependency sky-icon\n *\n * @uiVModel open request-close sync=constant:false\n *\n * @slot header - Header content area at the top of the dialog.\n * @slot body - Main content area of the dialog.\n * @slot footer - Footer actions area at the bottom of the dialog.\n *\n * @csspart dialog - The dialog surface wrapper element.\n * @csspart close-button - The top-right close button.\n * @csspart message - Optional message text shown above the body.\n * @csspart header - Container for the header slot.\n * @csspart content - Container for the body slot.\n * @csspart actions - Container for the footer slot.\n * @csspart footer - Alias part on the footer container.\n *\n * @fires {CustomEvent<SkyDialogRequestCloseDetail>} request-close - Fired when close intent is detected and parent should update `open`.\n * @fires {CustomEvent<void>} dialog-opened - Fired after open animation completes.\n * @fires {CustomEvent<void>} dialog-closed - Fired after close animation completes.\n *\n * @property {boolean} open - Whether the dialog is visible.\n * @property {boolean} closable - Shows a top-right close button.\n * @property {string} message - Optional message displayed above body content.\n * @property {boolean} overlay - Applies dim/blur backdrop effect.\n * @property {string} width - Max width of the dialog surface.\n * @property {boolean} separator - Shows separators around header/footer regions.\n * @property {boolean} persistent - Prevents outside/Escape close and highlights surface instead.\n * @property {boolean} closeOnEsc - Enables close intent on Escape key.\n * @property {SkyDialogPadding} headerPadding - Header padding token.\n * @property {SkyDialogPadding} bodyPadding - Body padding token.\n * @property {SkyDialogPadding} footerPadding - Footer padding token.\n * @property {boolean} highlightOnOutsideClick - Enables highlight animation on rejected outside click.\n * @method show Opens the dialog by setting `open` to true.\n * @method hide Closes the dialog by setting `open` to false.\n * @method focusDialog Focuses the native dialog surface.\n * @method getDialogElement Returns the native dialog element reference.\n *\n * @Behavior\n * - Uses native `<dialog>` element with enhanced functionality\n * - Controlled exclusively by the `open` attribute/property\n * - Uses native dialog focus behavior\n * - Supports smooth animations with configurable timing\n * - Uses the floating modal surface (frosted tertiary glass)\n * - **Standard**: Click outside closes dialog\n * - **Persistent**: Click outside highlights dialog instead of closing\n * - **Closable**: Shows close button in top-right corner\n * - **Escape handling**: Configurable Escape key behavior\n * - Uses `aria-modal=\"true\"` for screen reader isolation\n * - Native dialog focus behavior\n * - Escape key handling with user preferences\n * - Close button with appropriate ARIA label\n * - Respects reduced motion preferences\n * - Smooth open/close animations with scale effects\n * - Highlight animation for persistent dialogs\n * - Configurable animation durations\n * - Uses Web Animations API for performance\n * - Works with any content in header/body/footer slots\n * - Compatible with form controls and interactive content\n * - Can be nested or stacked\n * - Responsive width and padding\n *\n * @example\n * ```html\n * <sky-dialog open closable width=\"420px\" separator>\n *   <h3 slot=\"header\">Confirm Action</h3>\n *   <p slot=\"body\">Are you sure you want to proceed?</p>\n *   <div slot=\"footer\">\n *     <button>Cancel</button>\n *     <button>Confirm</button>\n *   </div>\n * </sky-dialog>\n * ```\n * ```vue\n * <template>\n *   <sky-dialog open closable width=\"420px\" separator>\n *     <h3 slot=\"header\">Confirm Action</h3>\n *     <p slot=\"body\">Are you sure you want to proceed?</p>\n *     <div slot=\"footer\">\n *       <button>Cancel</button>\n *       <button>Confirm</button>\n *     </div>\n *   </sky-dialog>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-dialog open closable width=\"420px\" separator>\n *       <h3 slot=\"header\">Confirm Action</h3>\n *       <p slot=\"body\">Are you sure you want to proceed?</p>\n *       <div slot=\"footer\">\n *         <button>Cancel</button>\n *         <button>Confirm</button>\n *       </div>\n *     </sky-dialog>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-dialog\")\nexport class SkyDialog extends LitElement {\n\n  static dependencies: Record<string, CustomElementConstructor> = {\n    \"sky-icon\": SkyIcon,\n  };\n\n  /** @public Whether the dialog is visible. */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** @public Shows a top-right close button. */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /** @public Optional message displayed above the body. */\n  @property({ type: String })\n  message = \"\";\n\n  /** @public Applies dim/blur overlay on host. */\n  @property({ type: Boolean, reflect: true })\n  overlay = false;\n\n  /** @public Max width of the dialog surface (e.g., \"480px\" or \"auto\"). */\n  @property({ type: String })\n  width = \"auto\";\n\n  /** @public Shows header/footer separators. */\n  @property({ type: Boolean, reflect: true })\n  separator = false;\n\n  /** @public Prevents close on outside click, highlights instead. */\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  /** @public Enables closing on Escape key. */\n  @property({ type: Boolean, reflect: true })\n  closeOnEsc = false;\n\n  /** @public Padding token for header container. */\n  @property({ type: String, reflect: true })\n  headerPadding: SkyDialogPadding = \"sm\";\n\n  /** @public Padding token for body container. */\n  @property({ type: String, reflect: true })\n  bodyPadding: SkyDialogPadding = \"sm\";\n\n  /** @public Padding token for footer container. */\n  @property({ type: String, reflect: true })\n  footerPadding: SkyDialogPadding = \"sm\";\n\n\n  /** @public Highlights dialog on outside click instead of closing. */\n  @property({\n    type: Boolean,\n    reflect: true,\n  })\n  highlightOnOutsideClick = true;\n\n  /** @private Whether header slot has content. */\n  @state()\n  private _hasHeader = false;\n\n  /** @private Whether body slot has content. */\n  @state()\n  private _hasBody = false;\n\n  /** @private Whether footer slot has content. */\n  @state()\n  private _hasFooter = false;\n\n  /** @private Whether dialog is in closing animation. */\n  @state()\n  private _isClosing = false;\n\n  /** @private Open animation instance. */\n  private _openAnimation: Animation | null = null;\n\n  /** @private Close animation instance. */\n  private _closeAnimation: Animation | null = null;\n\n  /** @private Highlight animation instance. */\n  private _highlightAnimation: Animation | null = null;\n\n  /** @private Reference to the native dialog element. */\n  @query(\"dialog\")\n  private dialogElement?: HTMLDialogElement;\n\n  /** @public Ref for the dialog element (e.g. for focus trap or positioning). */\n  dialogRef = createRef<HTMLDialogElement>();\n\n  /** @private Handle clicks on the dialog backdrop (outside surface). */\n  private _onBackdropPointerDown = (event: PointerEvent): void => {\n    const dialog = this.dialogElement;\n    if (!dialog || !dialog.open) return;\n\n    // In the <dialog> element, backdrop clicks are retargeted to the dialog itself.\n    // Clicks inside the surface target inner elements.\n    if (event.target !== dialog) return;\n\n    // \"Persistent\" dialogs don't close via outside click; they highlight instead (optional).\n    if (this.persistent) {\n      this._highlightDialog();\n      return;\n    }\n\n    // Standard behavior: outside click requests close.\n    this._requestClose(\"backdrop\");\n  };\n\n  static override styles = css`\n    :host {\n      display: contents;\n      font-family: var(--sky-font);\n    }\n\n    /* Floating modal template (§20.3) — single canonical surface */\n    dialog {\n      padding: 0;\n      margin: auto;\n      color: var(--sky-text-primary);\n      position: fixed;\n      box-sizing: border-box;\n      width: 100%;\n      text-align: center;\n      overflow: hidden;\n      z-index: var(--sky-z-modal, 1300);\n      background: var(--sky-glass-tertiary);\n      background-image: var(--sky-glass-surface);\n      backdrop-filter: var(--sky-blur-tertiary) var(--sky-saturation-tertiary)\n        var(--sky-brightness-tertiary);\n      -webkit-backdrop-filter: var(--sky-blur-tertiary)\n        var(--sky-saturation-tertiary) var(--sky-brightness-tertiary);\n      border: var(--sky-border-tertiary);\n      border-radius: var(--sky-radius-tertiary);\n      box-shadow:\n        var(--sky-box-shadow-inset),\n        var(--sky-box-shadow-tertiary);\n    }\n\n    dialog::backdrop {\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition: backdrop-filter 0.3s ease-in-out;\n    }\n\n    :host([overlay]) dialog::backdrop {\n      backdrop-filter: var(--sky-blur-tertiary);\n      -webkit-backdrop-filter: var(--sky-blur-tertiary);\n    }\n\n    .header-padding-none,\n    .body-padding-none,\n    .footer-padding-none {\n      padding: var(--sky-space-0, 0);\n    }\n\n    .header-padding-xs,\n    .body-padding-xs,\n    .footer-padding-xs {\n      padding: var(--sky-space-1, 4px);\n    }\n\n    .header-padding-sm,\n    .body-padding-sm,\n    .footer-padding-sm {\n      padding: var(--sky-space-2, 8px);\n    }\n\n    .header-padding-md,\n    .body-padding-md,\n    .footer-padding-md {\n      padding: var(--sky-space-4, 16px);\n    }\n\n    .header-padding-lg,\n    .body-padding-lg,\n    .footer-padding-lg {\n      padding: var(--sky-space-6, 24px);\n    }\n\n    .header-padding-xl,\n    .body-padding-xl,\n    .footer-padding-xl {\n      padding: var(--sky-space-8, 32px);\n    }\n\n    /* Close button — §20.6 inner dismiss affordance */\n    .close-button {\n      position: absolute;\n      top: var(--sky-space-1\\\\.5, 6px);\n      right: var(--sky-space-1\\\\.5, 6px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--sky-space-6, 24px);\n      height: var(--sky-space-6, 24px);\n      box-sizing: border-box;\n      border-radius: var(--sky-radius-full);\n      font-size: var(--sky-font-size-sm, 14px);\n      cursor: pointer;\n      color: var(--sky-text-primary);\n      border: none;\n      background-color: var(--sky-hover-primary);\n      backdrop-filter: none;\n      -webkit-backdrop-filter: none;\n      transition: color 0.2s ease, background-color 0.2s ease;\n      z-index: 1;\n    }\n\n    .close-button sky-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    }\n\n    .close-button:hover {\n      color: var(--sky-danger-primary);\n    }\n\n    .close-button:focus-visible {\n      outline: none;\n      box-shadow: var(--sky-focus-ring);\n    }\n\n    /* Message */\n    .message {\n      padding: var(--sky-space-4, 16px) 0;\n      margin: 0;\n    }\n\n    ::slotted([slot=\"header\"]) {\n      font-size: var(--sky-font-size-md, 16px);\n      font-weight: var(--sky-font-weight-bold, 700);\n      color: var(--sky-text-primary);\n      box-sizing: border-box;\n    }\n\n    dialog:focus,\n    dialog:focus-visible {\n      outline: none;\n    }\n\n    .header-separator {\n      border-bottom: var(--sky-border-primary);\n    }\n\n    .footer-separator {\n      border-top: var(--sky-border-primary);\n    }\n\n    sky-icon {\n      display: inline-block;\n      width: 1em;\n      height: 1em;\n    }\n\n    /* RTL support */\n    :host([dir=\"rtl\"]) .close-button {\n      right: auto;\n      left: var(--sky-space-1\\\\.5, 6px);\n    }\n\n    /* Animation classes */\n    dialog.opening {\n      opacity: 0;\n    }\n\n    dialog.closing {\n      opacity: 1;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      dialog::backdrop,\n      .close-button {\n        transition: none;\n      }\n    }\n  `;\n\n  constructor() {\n    super();\n    this._handleCancel = this._handleCancel.bind(this);\n  }\n\n  /** @protected */\n  override firstUpdated() {\n    const d = this.dialogElement;\n    if (!d) return;\n\n    // Capture phase is important so we beat the native <dialog> cancel/close behavior\n    d.addEventListener(\"keydown\", this._onKeyDown, { capture: true });\n    d.addEventListener(\"pointerdown\", this._onBackdropPointerDown);\n    d.addEventListener(\"cancel\", this._handleCancel as any); // optional extra safety\n    d.addEventListener(\"close\", this._onNativeClose); // keep state in sync (below)\n  }\n\n  /** @protected */\n  override disconnectedCallback() {\n    const d = this.dialogElement;\n    if (d) {\n      d.removeEventListener(\"keydown\", this._onKeyDown, {\n        capture: true,\n      } as any);\n      d.removeEventListener(\"pointerdown\", this._onBackdropPointerDown);\n      d.removeEventListener(\"cancel\", this._handleCancel as any);\n      d.removeEventListener(\"close\", this._onNativeClose);\n    }\n    super.disconnectedCallback();\n    this._unlockScroll();\n    if (d?.open) d.close();\n  }\n\n  /**\n   * Opens the dialog programmatically.\n   * @public\n   */\n  public show(): void {\n    this.open = true;\n  }\n\n  /**\n   * Closes the dialog programmatically.\n   * @public\n   */\n  public hide(): void {\n    this.open = false;\n  }\n\n  /**\n   * Manually focuses the dialog element.\n   * @public\n   */\n  public focusDialog(): void {\n    if (this.dialogElement) {\n      this.dialogElement.focus();\n    }\n  }\n\n  /**\n   * Gets the native dialog element.\n   * @returns The native HTMLDialogElement or undefined\n   * @public\n   */\n  public getDialogElement(): HTMLDialogElement | undefined {\n    return this.dialogElement;\n  }\n\n  /** @private */\n  private _onNativeClose = (): void => {\n    // If parent still says open=true, reopen immediately (persistent behavior)\n    if (this.open) {\n      // restore modal state\n      requestAnimationFrame(() => {\n        if (!this.dialogElement?.open) {\n          this.dialogElement?.showModal();\n        }\n      });\n    }\n  };\n\n  /** @protected */\n  override updated(changedProps: Map<string, any>) {\n    if (changedProps.has(\"open\")) {\n      // Use requestAnimationFrame to ensure DOM updates are complete\n      requestAnimationFrame(() => {\n        this._handleOpenChange(changedProps.get(\"open\"));\n      });\n    }\n  }\n\n  /**\n   * Handles open state changes.\n   * @param previousOpen - Previous open state\n   * @private\n   */\n  private _handleOpenChange(previousOpen: boolean): void {\n    if (!this.dialogElement) return;\n\n    if (this.open && !this.dialogElement.open) {\n      this._lockScroll();\n      this.dialogElement.showModal();\n\n      requestAnimationFrame(() => {\n        this._animateOpen();\n      });\n    } else if (!this.open && previousOpen) {\n      this._isClosing = true;\n      this._animateClose();\n    }\n  }\n\n  /** @private */\n  private _lockScroll(): void {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n    if (_dialogOpenCount === 0) {\n      _savedScrollY = window.scrollY;\n      window.scrollTo(0, 0);\n    }\n    _dialogOpenCount++;\n    document.documentElement.setAttribute(\"data-sky-dialog-open\", \"true\");\n  }\n\n  /** @private */\n  private _unlockScroll(): void {\n    if (typeof window === \"undefined\" || typeof document === \"undefined\") return;\n    _dialogOpenCount = Math.max(0, _dialogOpenCount - 1);\n    if (_dialogOpenCount === 0) {\n      document.documentElement.removeAttribute(\"data-sky-dialog-open\");\n      window.scrollTo(0, _savedScrollY);\n    }\n  }\n\n  /** @private */\n  private _prefersReducedMotion(): boolean {\n    if (typeof window === \"undefined\" || !window.matchMedia) return false;\n    return window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  }\n\n  /** @private */\n  private _animateOpen(): void {\n    const dialog = this.dialogElement;\n    if (!dialog) return;\n\n    this._openAnimation?.cancel();\n    this._closeAnimation?.cancel();\n\n    const duration = this._prefersReducedMotion() ? 0 : 300;\n    const animation = dialog.animate(\n      [\n        {\n          opacity: 0,\n          transform: \"scale(0.95)\",\n          transformOrigin: \"center center\",\n        },\n        { opacity: 1, transform: \"scale(1)\", transformOrigin: \"center center\" },\n      ],\n      {\n        duration,\n        easing: \"ease-out\",\n        fill: \"forwards\",\n      },\n    );\n\n    animation.onfinish = () => {\n      this.dispatchEvent(\n        new CustomEvent(\"dialog-opened\", {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    };\n\n    this._openAnimation = animation;\n  }\n\n  /** @private */\n  private _animateClose(): void {\n    const dialog = this.dialogElement;\n    if (!dialog) return;\n    this._openAnimation?.cancel();\n    this._closeAnimation?.cancel();\n\n    const duration = this._prefersReducedMotion() ? 0 : 150;\n    const animation = dialog.animate(\n      [\n        { opacity: 1, transform: \"scale(1)\", transformOrigin: \"center center\" },\n        {\n          opacity: 0,\n          transform: \"scale(0.95)\",\n          transformOrigin: \"center center\",\n        },\n      ],\n      {\n        duration,\n        easing: \"ease-out\",\n        fill: \"forwards\",\n      },\n    );\n\n    animation.onfinish = () => {\n      dialog.close();\n      this._unlockScroll();\n      this._isClosing = false;\n      this.dispatchEvent(\n        new CustomEvent(\"dialog-closed\", {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    };\n\n    this._closeAnimation = animation;\n  }\n\n  /** @private */\n  private _handleCancel(event: Event): void {\n    event.preventDefault();\n\n    if (this.persistent || !this.closeOnEsc) {\n      this._highlightDialog();\n      return;\n    }\n\n    this._requestClose(\"escape\");\n  }\n\n  /** @private */\n  private _highlightDialog(): void {\n    if (!this.highlightOnOutsideClick) return;\n    if (this._prefersReducedMotion()) return;\n\n    const dialog = this.dialogElement;\n    if (!dialog) return;\n\n    this._highlightAnimation?.cancel();\n\n    const animation = dialog.animate(\n      [\n        { transform: \"scale(1)\" },\n        { transform: \"scale(1.05)\" },\n        { transform: \"scale(1)\" },\n      ],\n      {\n        duration: 300,\n        easing: \"ease-in-out\",\n      },\n    );\n\n    this._highlightAnimation = animation;\n  }\n\n\n\n  /** @private */\n  private _requestClose(reason: SkyDialogRequestCloseDetail[\"reason\"]): void {\n    if (this._isClosing) return;\n    this.dispatchEvent(\n      new CustomEvent<SkyDialogRequestCloseDetail>(\"request-close\", {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /**\n   * Checks if a slot has content.\n   * @param slot - Slot element to check\n   * @returns True if slot has content\n   * @private\n   */\n  private _slotHasContent(slot: HTMLSlotElement): boolean {\n    const nodes = slot.assignedNodes({ flatten: true });\n    return nodes.some((n) => {\n      if (n.nodeType === Node.TEXT_NODE) {\n        return !!n.textContent?.trim();\n      }\n      return true;\n    });\n  }\n\n  /** @private */\n  private _onHeaderSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeader = this._slotHasContent(slot);\n  };\n\n  /** @private */\n  private _onBodySlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasBody = this._slotHasContent(slot);\n  };\n\n  /** @private */\n  private _onFooterSlotChange = (e: Event): void => {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooter = this._slotHasContent(slot);\n  };\n\n  /** @private */\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (e.key !== \"Escape\") return;\n\n    // Always stop native <dialog> ESC behavior\n    e.preventDefault();\n    e.stopPropagation();\n    // If persistent OR closeOnEsc is false → do NOT close, just highlight\n    if (this.persistent || !this.closeOnEsc) {\n      this._highlightDialog();\n      return;\n    }\n\n    // Allowed to close via ESC\n    this._requestClose(\"escape\");\n  };\n\n  /** @protected */\n  override render() {\n    const valid: Record<SkyDialogPadding, true> = {\n      none: true,\n      xs: true,\n      sm: true,\n      md: true,\n      lg: true,\n      xl: true,\n    };\n\n    const hp = valid[this.headerPadding] ? this.headerPadding : \"md\";\n    const bp = valid[this.bodyPadding] ? this.bodyPadding : \"md\";\n    const fp = valid[this.footerPadding] ? this.footerPadding : \"md\";\n\n    const headerClasses: Record<string, boolean> = {};\n    if (this._hasHeader) {\n      headerClasses[`header-padding-${hp}`] = true;\n      if (this.separator) {\n        headerClasses[\"header-separator\"] = true;\n      }\n    }\n\n    const footerClasses: Record<string, boolean> = {};\n    if (this._hasFooter) {\n      footerClasses[\"actions\"] = true;\n      footerClasses[`footer-padding-${fp}`] = true;\n      if (this.separator) {\n        footerClasses[\"footer-separator\"] = true;\n      }\n    } else {\n      footerClasses[\"actions\"] = true;\n    }\n\n    return html`\n      <dialog\n        part=\"dialog\"\n        aria-modal=\"true\"\n        style=\"max-width: ${this.width};\"\n        @cancel=\"${this._handleCancel}\"\n        ${ref(this.dialogRef)}\n        ${animate({\n          keyframeOptions: {\n            duration: 300,\n            easing: \"ease-out\",\n          },\n        })}\n      >\n        <slot></slot>\n\n        ${when(this.message, () => html`\n          <p class=\"message\" part=\"message\">${this.message}</p>\n        `)}\n\n        <div class=${classMap(headerClasses)} part=\"header\">\n          <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}></slot>\n        </div>\n\n        <div\n          class=${classMap({\n            [`body-padding-${bp}`]: this._hasBody,\n          })}\n          part=\"content\"\n        >\n          <slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>\n        </div>\n\n        <div class=${classMap(footerClasses)} part=\"actions footer\">\n          <slot name=\"footer\" @slotchange=${this._onFooterSlotChange}></slot>\n        </div>\n        ${when(this.closable, () => html`\n          <button\n            class=\"close-button\"\n            part=\"close-button\"\n            type=\"button\"\n            aria-label=\"Close dialog\"\n            @click=${() => this._requestClose(\"close-button\")}\n          >\n            <sky-icon icon=\"ion:close\"></sky-icon>\n          </button>\n        `)}\n      </dialog>\n    `;\n  }\n}\n"],"names":["_dialogOpenCount","_savedScrollY","SkyDialog","LitElement","constructor","super","this","open","closable","message","overlay","width","separator","persistent","closeOnEsc","headerPadding","bodyPadding","footerPadding","highlightOnOutsideClick","_hasHeader","_hasBody","_hasFooter","_isClosing","_openAnimation","_closeAnimation","_highlightAnimation","dialogRef","createRef","_onBackdropPointerDown","event","dialog","dialogElement","target","_highlightDialog","_requestClose","_onNativeClose","requestAnimationFrame","showModal","_onHeaderSlotChange","e","slot","_slotHasContent","_onBodySlotChange","_onFooterSlotChange","_onKeyDown","key","preventDefault","stopPropagation","_handleCancel","bind","firstUpdated","d","addEventListener","capture","disconnectedCallback","removeEventListener","_unlockScroll","close","show","hide","focusDialog","focus","getDialogElement","updated","changedProps","has","_handleOpenChange","get","previousOpen","_lockScroll","_animateOpen","_animateClose","window","document","scrollY","scrollTo","documentElement","setAttribute","Math","max","removeAttribute","_prefersReducedMotion","matchMedia","matches","cancel","duration","animation","animate","opacity","transform","transformOrigin","easing","fill","onfinish","dispatchEvent","CustomEvent","bubbles","composed","reason","detail","assignedNodes","flatten","some","n","nodeType","Node","TEXT_NODE","textContent","trim","render","valid","none","xs","sm","md","lg","xl","hp","bp","fp","headerClasses","footerClasses","html","ref","keyframeOptions","when","classMap","dependencies","SkyIcon","styles","css","__decorateClass","property","type","Boolean","reflect","prototype","String","state","query","customElement"],"mappings":"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"}

package/dist/sky-divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/sky-divider/sky-divider.js

@@ -1,4 +1,18 @@
-import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as r,html as o}from"lit";import{property as s,customElement as d}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{classMap as h}from"lit/directives/class-map.js";import{resolveColor as p}from"../helper/utils/color-resolver.js";let a=class extends e{constructor(){super(...arguments),this.color="muted",this.thickness="1px",this.margin="",this.direction="horizontal",this.inset=!1,this.height="100%"}static{this.styles=r`
+import{css as t,LitElement as r,html as i}from"lit";import{property as e,customElement as o}from"lit/decorators.js";import{when as s}from"lit/directives/when.js";import{classMap as n}from"lit/directives/class-map.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";var a=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,r,i,e)=>{for(var o,s=e>1?void 0:e?d(r,i):r,n=t.length-1;n>=0;n--)(o=t[n])&&(s=(e?o(r,i,s):o(s))||s);return e&&s&&a(r,i,s),s};let l=class extends r{constructor(){super(...arguments),this.color="muted",this.thickness="1px",this.margin="",this.direction="horizontal",this.inset=!1,this.height="100%"}updated(t){t.has("color")&&this.style.setProperty("--divider-color",h(this.color)),t.has("thickness")&&this.style.setProperty("--divider-thickness",this.thickness),t.has("margin")&&this.style.setProperty("--divider-margin",this.margin),t.has("height")&&this.style.setProperty("--divider-height",this.height)}getComputedColor(){return getComputedStyle(this).getPropertyValue("--divider-color").trim()||this.color}getComputedThickness(){return getComputedStyle(this).getPropertyValue("--divider-thickness").trim()||this.thickness}render(){const t="vertical"===this.direction,r=n({vertical:!0,inset:this.inset}),e=n({horizontal:!0,inset:this.inset});return s(t,()=>i`
+        <div
+          class=${r}
+          part="divider"
+          role="separator"
+          aria-orientation="vertical"
+        ></div>
+      `,()=>i`
+        <hr
+          class=${e}
+          part="divider"
+          role="separator"
+          aria-orientation="horizontal"
+        />
+      `)}};l.styles=t`
     hr {
       border: none;
       border-top: var(--divider-thickness, 2px) solid var(--divider-color);
@@ -24,19 +38,5 @@ import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as
       margin-bottom: 20px;
       height: calc(100% - 20px * 2);
     }
-  `}updated(t){t.has("color")&&this.style.setProperty("--divider-color",p(this.color)),t.has("thickness")&&this.style.setProperty("--divider-thickness",this.thickness),t.has("margin")&&this.style.setProperty("--divider-margin",this.margin),t.has("height")&&this.style.setProperty("--divider-height",this.height)}getComputedColor(){return getComputedStyle(this).getPropertyValue("--divider-color").trim()||this.color}getComputedThickness(){return getComputedStyle(this).getPropertyValue("--divider-thickness").trim()||this.thickness}render(){const t="vertical"===this.direction,i=h({vertical:!0,inset:this.inset}),e=h({horizontal:!0,inset:this.inset});return n(t,()=>o`
-        <div
-          class=${i}
-          part="divider"
-          role="separator"
-          aria-orientation="vertical"
-        ></div>
-      `,()=>o`
-        <hr
-          class=${e}
-          part="divider"
-          role="separator"
-          aria-orientation="horizontal"
-        />
-      `)}};t([s({type:String}),i("design:type",Object)],a.prototype,"color",void 0),t([s({type:String}),i("design:type",Object)],a.prototype,"thickness",void 0),t([s({type:String}),i("design:type",Object)],a.prototype,"margin",void 0),t([s({type:String}),i("design:type",String)],a.prototype,"direction",void 0),t([s({type:Boolean}),i("design:type",Object)],a.prototype,"inset",void 0),t([s({type:String}),i("design:type",Object)],a.prototype,"height",void 0),a=t([d("sky-divider")],a);export{a as SkyDivider};
+  `,p([e({type:String})],l.prototype,"color",2),p([e({type:String})],l.prototype,"thickness",2),p([e({type:String})],l.prototype,"margin",2),p([e({type:String})],l.prototype,"direction",2),p([e({type:Boolean})],l.prototype,"inset",2),p([e({type:String})],l.prototype,"height",2),l=p([o("sky-divider")],l);export{l as SkyDivider};
 //# sourceMappingURL=sky-divider.js.map

package/dist/sky-divider/sky-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-divider.js","sources":["../../src/sky-divider/sky-divider.ts"],"sourcesContent":[null],"names":["SkyDivider","LitElement","constructor","this","color","thickness","margin","direction","inset","height","styles","css","updated","changedProperties","has","style","setProperty","resolveColor","getComputedColor","getComputedStyle","getPropertyValue","trim","getComputedThickness","render","isVertical","verticalClasses","classMap","vertical","horizontalClasses","horizontal","when","html","__decorate","property","type","String","prototype","Boolean","customElement"],"mappings":"6UA8EO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAMLC,KAAAC,MAAQ,QAORD,KAAAE,UAAY,MAOZF,KAAAG,OAAS,GAOTH,KAAAI,UAAiC,aAOjCJ,KAAAK,OAAQ,EAORL,KAAAM,OAAS,MAsGX,QApGkBN,KAAAO,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;GA0B1B,CAGO,OAAAC,CAAQC,GACXA,EAAkBC,IAAI,UACxBX,KAAKY,MAAMC,YAAY,kBAAmBC,EAAad,KAAKC,QAE1DS,EAAkBC,IAAI,cACxBX,KAAKY,MAAMC,YAAY,sBAAuBb,KAAKE,WAEjDQ,EAAkBC,IAAI,WACxBX,KAAKY,MAAMC,YAAY,mBAAoBb,KAAKG,QAE9CO,EAAkBC,IAAI,WACxBX,KAAKY,MAAMC,YAAY,mBAAoBb,KAAKM,OAEpD,CAOO,gBAAAS,GACL,OACEC,iBAAiBhB,MAAMiB,iBAAiB,mBAAmBC,QAC3DlB,KAAKC,KAET,CAOO,oBAAAkB,GACL,OACEH,iBAAiBhB,MAAMiB,iBAAiB,uBAAuBC,QAC/DlB,KAAKE,SAET,CAGS,MAAAkB,GACP,MAAMC,EAAgC,aAAnBrB,KAAKI,UAClBkB,EAAkBC,EAAS,CAC/BC,UAAU,EACVnB,MAAOL,KAAKK,QAERoB,EAAoBF,EAAS,CACjCG,YAAY,EACZrB,MAAOL,KAAKK,QAGd,OAAOsB,EACLN,EACA,IAAMO,CAAI;;kBAEEN;;;;;QAMZ,IAAMM,CAAI;;kBAEEH;;;;;QAOhB,GAxIAI,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFnC,EAAAoC,UAAA,gBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACAnC,EAAAoC,UAAA,oBAOlBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACNnC,EAAAoC,UAAA,iBAOZJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCAC4BnC,EAAAoC,UAAA,oBAO9CJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,mCACJrC,EAAAoC,UAAA,gBAOdJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFnC,EAAAoC,UAAA,iBAzCLpC,EAAUgC,EAAA,CADtBM,EAAc,gBACFtC"}
+{"version":3,"file":"sky-divider.js","sources":["../../src/sky-divider/sky-divider.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { when } from \"lit/directives/when.js\";\r\nimport { classMap } from \"lit/directives/class-map.js\";\r\nimport { resolveColor } from \"../helper/utils/color-resolver\";\r\n\r\nexport type SkyDividerDirection = \"horizontal\" | \"vertical\";\r\n\r\n/**\r\n * @element sky-divider\r\n *\r\n * @summary Visual separator component for horizontal and vertical layout separation.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/divider\r\n *\r\n * @csspart divider - The divider line element (either `<hr>` or `<div>` depending on direction).\r\n *\r\n * @property {string} color - Divider color token or CSS color.\r\n * @property {string} thickness - Divider thickness (for example `1px` or `2px`).\r\n * @property {string} margin - Outer margin around the divider.\r\n * @property {SkyDividerDirection} direction - Divider orientation.\r\n * @property {boolean} inset - Enables indented divider layout.\r\n * @property {string} height - Height used for vertical orientation.\r\n * @method getComputedColor Returns the resolved runtime divider color.\r\n * @method getComputedThickness Returns the resolved runtime divider thickness.\r\n *\r\n * @cssprop --divider-color - CSS custom property for divider color.\r\n * @cssprop --divider-thickness - CSS custom property for divider thickness.\r\n * @cssprop --divider-margin - CSS custom property for divider margin.\r\n * @cssprop --divider-height - CSS custom property for vertical divider height.\r\n *\r\n * @Behavior\r\n * - Simple visual divider that can be horizontal or vertical\r\n * - Supports extensive customization via properties\r\n * - Automatically resolves color values using color resolver\r\n * - Updates CSS custom properties when properties change\r\n * - **horizontal**: Renders as `<hr>` element, spans full width\r\n * - **vertical**: Renders as `<div>` element, spans configurable height\r\n * - Horizontal dividers use semantic `<hr>` element\r\n * - Vertical dividers use `<div>` with appropriate styling\r\n *\r\n * @example\r\n * ```html\r\n * <div style=\"display: flex; align-items: center;\">\r\n *   <span>Left content</span>\r\n *   <sky-divider\r\n *     direction=\"vertical\"\r\n *     height=\"50px\"\r\n *     margin=\"0 16px\"\r\n *   ></sky-divider>\r\n *   <span>Right content</span>\r\n * </div>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <div style=\"display:flex;align-items:center;\">\r\n *     <span>Left content</span>\r\n *     <sky-divider direction=\"vertical\" height=\"50px\" margin=\"0 16px\"></sky-divider>\r\n *     <span>Right content</span>\r\n *   </div>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <div style={{ display: \"flex\", alignItems: \"center\" }}>\r\n *       <span>Left content</span>\r\n *       <sky-divider direction=\"vertical\" height=\"50px\" margin=\"0 16px\"></sky-divider>\r\n *       <span>Right content</span>\r\n *     </div>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-divider\")\r\nexport class SkyDivider extends LitElement {\r\n  /**\r\n   * The color of the divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  color = \"muted\";\r\n\r\n  /**\r\n   * The thickness of the divider (e.g., `\"1px\"`, `\"2px\"`).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  thickness = \"1px\";\r\n\r\n  /**\r\n   * The margin around the divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  margin = \"\";\r\n\r\n  /**\r\n   * Divider orientation.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  direction: SkyDividerDirection = \"horizontal\";\r\n\r\n  /**\r\n   * Whether the divider should be inset (indented).\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  inset = false;\r\n\r\n  /**\r\n   * The height of a vertical divider.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  height = \"100%\";\r\n\r\n  static override styles = css`\r\n    hr {\r\n      border: none;\r\n      border-top: var(--divider-thickness, 2px) solid var(--divider-color);\r\n      margin: var(--divider-margin);\r\n    }\r\n\r\n    .vertical {\r\n      border-top: none;\r\n      border-left: var(--divider-thickness, 2px) solid var(--divider-color);\r\n      height: var(--divider-height, 100%);\r\n      width: 0 !important;\r\n      margin: var(--divider-margin);\r\n    }\r\n\r\n    .inset.horizontal {\r\n      margin-left: 20px;\r\n      margin-right: 20px;\r\n      width: calc(100% - 20px * 2);\r\n    }\r\n\r\n    .inset.vertical {\r\n      margin-top: 20px;\r\n      margin-bottom: 20px;\r\n      height: calc(100% - 20px * 2);\r\n    }\r\n  `;\r\n\r\n  /** @protected */\r\n  override updated(changedProperties: Map<string, unknown>): void {\r\n    if (changedProperties.has(\"color\")) {\r\n      this.style.setProperty(\"--divider-color\", resolveColor(this.color));\r\n    }\r\n    if (changedProperties.has(\"thickness\")) {\r\n      this.style.setProperty(\"--divider-thickness\", this.thickness);\r\n    }\r\n    if (changedProperties.has(\"margin\")) {\r\n      this.style.setProperty(\"--divider-margin\", this.margin);\r\n    }\r\n    if (changedProperties.has(\"height\")) {\r\n      this.style.setProperty(\"--divider-height\", this.height);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Gets the current computed color of the divider.\r\n   * @returns Resolved color value\r\n   * @public\r\n   */\r\n  public getComputedColor(): string {\r\n    return (\r\n      getComputedStyle(this).getPropertyValue(\"--divider-color\").trim() ||\r\n      this.color\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Gets the current computed thickness of the divider.\r\n   * @returns Resolved thickness value\r\n   * @public\r\n   */\r\n  public getComputedThickness(): string {\r\n    return (\r\n      getComputedStyle(this).getPropertyValue(\"--divider-thickness\").trim() ||\r\n      this.thickness\r\n    );\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const isVertical = this.direction === \"vertical\";\r\n    const verticalClasses = classMap({\r\n      vertical: true,\r\n      inset: this.inset,\r\n    });\r\n    const horizontalClasses = classMap({\r\n      horizontal: true,\r\n      inset: this.inset,\r\n    });\r\n\r\n    return when(\r\n      isVertical,\r\n      () => html`\r\n        <div\r\n          class=${verticalClasses}\r\n          part=\"divider\"\r\n          role=\"separator\"\r\n          aria-orientation=\"vertical\"\r\n        ></div>\r\n      `,\r\n      () => html`\r\n        <hr\r\n          class=${horizontalClasses}\r\n          part=\"divider\"\r\n          role=\"separator\"\r\n          aria-orientation=\"horizontal\"\r\n        />\r\n      `,\r\n    );\r\n  }\r\n}\r\n"],"names":["SkyDivider","LitElement","constructor","super","arguments","this","color","thickness","margin","direction","inset","height","updated","changedProperties","has","style","setProperty","resolveColor","getComputedColor","getComputedStyle","getPropertyValue","trim","getComputedThickness","render","isVertical","verticalClasses","classMap","vertical","horizontalClasses","horizontal","when","html","styles","css","__decorateClass","property","type","String","prototype","Boolean","customElement"],"mappings":"0dA8EO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,GAAAC,SAAAC,WAMLC,KAAAC,MAAQ,QAORD,KAAAE,UAAY,MAOZF,KAAAG,OAAS,GAOTH,KAAAI,UAAiC,aAOjCJ,KAAAK,OAAQ,EAORL,KAAAM,OAAS,MAAA,CA+BA,OAAAC,CAAQC,GACXA,EAAkBC,IAAI,UACxBT,KAAKU,MAAMC,YAAY,kBAAmBC,EAAaZ,KAAKC,QAE1DO,EAAkBC,IAAI,cACxBT,KAAKU,MAAMC,YAAY,sBAAuBX,KAAKE,WAEjDM,EAAkBC,IAAI,WACxBT,KAAKU,MAAMC,YAAY,mBAAoBX,KAAKG,QAE9CK,EAAkBC,IAAI,WACxBT,KAAKU,MAAMC,YAAY,mBAAoBX,KAAKM,OAEpD,CAOO,gBAAAO,GACL,OACEC,iBAAiBd,MAAMe,iBAAiB,mBAAmBC,QAC3DhB,KAAKC,KAET,CAOO,oBAAAgB,GACL,OACEH,iBAAiBd,MAAMe,iBAAiB,uBAAuBC,QAC/DhB,KAAKE,SAET,CAGS,MAAAgB,GACP,MAAMC,EAAgC,aAAnBnB,KAAKI,UAClBgB,EAAkBC,EAAS,CAC/BC,UAAU,EACVjB,MAAOL,KAAKK,QAERkB,EAAoBF,EAAS,CACjCG,YAAY,EACZnB,MAAOL,KAAKK,QAGd,OAAOoB,EACLN,EACA,IAAMO,CAAA;;kBAEMN;;;;;QAMZ,IAAMM,CAAA;;kBAEMH;;;;;QAOhB,GA9IW5B,EA2CKgC,OAASC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;IArCzBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UALPrC,EAMXsC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAZPrC,EAaXsC,UAAA,YAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnBPrC,EAoBXsC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1BPrC,EA2BXsC,UAAA,YAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMG,WAjCPvC,EAkCXsC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAxCPrC,EAyCXsC,UAAA,SAAA,GAzCWtC,EAANkC,EAAA,CADNM,EAAc,gBACFxC"}

package/dist/sky-flexbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/sky-flexbox/sky-flexbox.js

@@ -1,4 +1,11 @@
-import{__decorate as t,__metadata as a}from"tslib";import{LitElement as n,css as s,html as e}from"lit";import{property as i,customElement as r}from"lit/decorators.js";let p=class extends n{constructor(){super(...arguments),this.direction="row",this.wrap="wrap",this.justify="flex-start",this.align="stretch",this.alignContent="normal",this.gap="16px",this.col=12,this.updateSpans=()=>{const t=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[];for(const a of t){if(!(a instanceof HTMLElement))continue;this.applySpanVar(a,"--span",this.readSpanRaw(a,"span","span")),this.applySpanVar(a,"--span-lg",this.readSpanRaw(a,"span-lg","spanLg")),this.applySpanVar(a,"--span-md",this.readSpanRaw(a,"span-md","spanMd")),this.applySpanVar(a,"--span-sm",this.readSpanRaw(a,"span-sm","spanSm")),this.applySpanVar(a,"--span-xs",this.readSpanRaw(a,"span-xs","spanXs"));null!=this.readSpanRaw(a,"span","span")||null!=this.readSpanRaw(a,"span-lg","spanLg")||null!=this.readSpanRaw(a,"span-md","spanMd")||null!=this.readSpanRaw(a,"span-sm","spanSm")||null!=this.readSpanRaw(a,"span-xs","spanXs")?a.dataset.flexSpan="":delete a.dataset.flexSpan}}}static{this.styles=s`
+import{css as a,LitElement as t,html as n}from"lit";import{property as s,customElement as e}from"lit/decorators.js";var r=Object.defineProperty,p=Object.getOwnPropertyDescriptor,i=(a,t,n,s)=>{for(var e,i=s>1?void 0:s?p(t,n):t,o=a.length-1;o>=0;o--)(e=a[o])&&(i=(s?e(t,n,i):e(i))||i);return s&&i&&r(t,n,i),i};let o=class extends t{constructor(){super(...arguments),this.direction="row",this.wrap="wrap",this.justify="flex-start",this.align="stretch",this.alignContent="normal",this.gap="16px",this.col=12,this.updateSpans=()=>{const a=this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[];for(const t of a){if(!(t instanceof HTMLElement))continue;this.applySpanVar(t,"--span",this.readSpanRaw(t,"span","span")),this.applySpanVar(t,"--span-lg",this.readSpanRaw(t,"span-lg","spanLg")),this.applySpanVar(t,"--span-md",this.readSpanRaw(t,"span-md","spanMd")),this.applySpanVar(t,"--span-sm",this.readSpanRaw(t,"span-sm","spanSm")),this.applySpanVar(t,"--span-xs",this.readSpanRaw(t,"span-xs","spanXs"));null!=this.readSpanRaw(t,"span","span")||null!=this.readSpanRaw(t,"span-lg","spanLg")||null!=this.readSpanRaw(t,"span-md","spanMd")||null!=this.readSpanRaw(t,"span-sm","spanSm")||null!=this.readSpanRaw(t,"span-xs","spanXs")?t.dataset.flexSpan="":delete t.dataset.flexSpan}}}connectedCallback(){super.connectedCallback(),this._childMo=new MutationObserver(()=>this.updateSpans()),this._childMo.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["span","span-lg","span-md","span-sm","span-xs"]})}disconnectedCallback(){super.disconnectedCallback(),this._childMo?.disconnect()}firstUpdated(){this.syncVars(),this.updateSpans()}updated(a){(a.has("wrap")||a.has("gap")||a.has("gapX")||a.has("gapY")||a.has("col")||a.has("justify")||a.has("direction")||a.has("align")||a.has("alignContent"))&&this.syncVars(),a.has("col")&&this.updateSpans()}syncVars(){const a={"--wrap":this.wrap,"--gap":this.gap,"--gap-x":this.gapX??this.gap,"--gap-y":this.gapY??this.gap,"--columns":String(this.col),"--justify":this.justify,"--direction":this.direction,"--align":this.align,"--align-content":this.alignContent};Object.entries(a).forEach(([a,t])=>this.style.setProperty(a,t))}recalculateSpans(){this.updateSpans()}render(){const a="column"===this.direction||"column-reverse"===this.direction;return n`
+      <div
+        class="flex-container ${a?"is-column":"is-row"}"
+        part="container"
+      >
+        <slot @slotchange=${this.updateSpans}></slot>
+      </div>
+    `}readSpanRaw(a,t,n){const s=a.getAttribute(t);if(null!=s&&""!==s)return s;const e=a[n];return null!=e&&""!==e?String(e):null}applySpanVar(a,t,n){const s=this.clampSpan(n);s?a.style.setProperty(t,String(s)):a.style.removeProperty(t)}clampSpan(a){if(!a)return null;return Math.max(1,Math.min(this.col,Number(a)||1))}};o.styles=a`
     :host {
       display: block;
     }
@@ -71,12 +78,5 @@ import{__decorate as t,__metadata as a}from"tslib";import{LitElement as n,css as
         --span-current: var(--span-xs, var(--span-current));
       }
     }
-  `}connectedCallback(){super.connectedCallback(),this._childMo=new MutationObserver(()=>this.updateSpans()),this._childMo.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["span","span-lg","span-md","span-sm","span-xs"]})}disconnectedCallback(){super.disconnectedCallback(),this._childMo?.disconnect()}firstUpdated(){this.syncVars(),this.updateSpans()}updated(t){(t.has("wrap")||t.has("gap")||t.has("gapX")||t.has("gapY")||t.has("col")||t.has("justify")||t.has("direction")||t.has("align")||t.has("alignContent"))&&this.syncVars(),t.has("col")&&this.updateSpans()}syncVars(){const t={"--wrap":this.wrap,"--gap":this.gap,"--gap-x":this.gapX??this.gap,"--gap-y":this.gapY??this.gap,"--columns":String(this.col),"--justify":this.justify,"--direction":this.direction,"--align":this.align,"--align-content":this.alignContent};Object.entries(t).forEach(([t,a])=>this.style.setProperty(t,a))}recalculateSpans(){this.updateSpans()}render(){const t="column"===this.direction||"column-reverse"===this.direction;return e`
-      <div
-        class="flex-container ${t?"is-column":"is-row"}"
-        part="container"
-      >
-        <slot @slotchange=${this.updateSpans}></slot>
-      </div>
-    `}readSpanRaw(t,a,n){const s=t.getAttribute(a);if(null!=s&&""!==s)return s;const e=t[n];return null!=e&&""!==e?String(e):null}applySpanVar(t,a,n){const s=this.clampSpan(n);s?t.style.setProperty(a,String(s)):t.style.removeProperty(a)}clampSpan(t){if(!t)return null;return Math.max(1,Math.min(this.col,Number(t)||1))}};t([i({type:String}),a("design:type",String)],p.prototype,"direction",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"wrap",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"justify",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"align",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"alignContent",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"gap",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"gapX",void 0),t([i({type:String}),a("design:type",String)],p.prototype,"gapY",void 0),t([i({type:Number}),a("design:type",Number)],p.prototype,"col",void 0),p=t([r("sky-flexbox")],p);export{p as SkyFlexbox};
+  `,i([s({type:String})],o.prototype,"direction",2),i([s({type:String})],o.prototype,"wrap",2),i([s({type:String})],o.prototype,"justify",2),i([s({type:String})],o.prototype,"align",2),i([s({type:String})],o.prototype,"alignContent",2),i([s({type:String})],o.prototype,"gap",2),i([s({type:String})],o.prototype,"gapX",2),i([s({type:String})],o.prototype,"gapY",2),i([s({type:Number})],o.prototype,"col",2),o=i([e("sky-flexbox")],o);export{o as SkyFlexbox};
 //# sourceMappingURL=sky-flexbox.js.map

package/dist/sky-flexbox/sky-flexbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-flexbox.js","sources":["../../src/sky-flexbox/sky-flexbox.ts"],"sourcesContent":[null],"names":["SkyFlexbox","LitElement","constructor","this","direction","wrap","justify","align","alignContent","gap","col","updateSpans","nodes","shadowRoot","querySelector","assignedElements","flatten","el","HTMLElement","applySpanVar","readSpanRaw","dataset","flexSpan","styles","css","connectedCallback","super","_childMo","MutationObserver","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","disconnect","firstUpdated","syncVars","updated","changed","has","gapX","gapY","String","Object","entries","forEach","k","v","style","setProperty","recalculateSpans","render","isColumn","html","attrName","propName","fromAttr","getAttribute","fromProp","cssVar","raw","value","clampSpan","removeProperty","Math","max","min","Number","__decorate","property","type","prototype","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-flexbox.js","sources":["../../src/sky-flexbox/sky-flexbox.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\n\r\nexport type SkyFlexboxDirection = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\r\nexport type SkyFlexboxWrap = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\r\nexport type SkyFlexboxJustify =\r\n  | \"flex-start\"\r\n  | \"center\"\r\n  | \"flex-end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\nexport type SkyFlexboxAlign = \"stretch\" | \"flex-start\" | \"center\" | \"flex-end\" | \"baseline\";\r\nexport type SkyFlexboxAlignContent =\r\n  | \"normal\"\r\n  | \"stretch\"\r\n  | \"center\"\r\n  | \"start\"\r\n  | \"end\"\r\n  | \"flex-start\"\r\n  | \"flex-end\"\r\n  | \"space-between\"\r\n  | \"space-around\"\r\n  | \"space-evenly\";\r\n\r\n/**\r\n * @element sky-flexbox\r\n *\r\n * @summary Flexbox container with grid-like span support for slotted children.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/flexbox\r\n *\r\n * @slot - Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).\r\n *\r\n * @property {SkyFlexboxDirection} direction - Flex direction.\r\n * @property {SkyFlexboxWrap} wrap - Flex wrap behavior.\r\n * @property {SkyFlexboxJustify} justify - Main-axis alignment.\r\n * @property {SkyFlexboxAlign} align - Cross-axis alignment.\r\n * @property {SkyFlexboxAlignContent} alignContent - Multi-line cross-axis distribution.\r\n * @property {string} gap - Shared row/column gap value.\r\n * @property {string | undefined} gapX - Horizontal gap override.\r\n * @property {string | undefined} gapY - Vertical gap override.\r\n * @property {number} col - Total column count used for span calculations.\r\n *\r\n * @fires {Event} slotchange - Fired when slotted children change.\r\n * @method recalculateSpans Recomputes slotted child span CSS variables.\r\n *\r\n * @csspart container - The flex container element.\r\n *\r\n * @Behavior\r\n * - Implements CSS Flexbox with custom property-based configuration\r\n * - Supports responsive span calculations based on column grid system\r\n * - Automatically manages CSS custom properties for child elements\r\n * - Handles responsive breakpoints through span attributes\r\n *\r\n * - Uses a configurable column count (default: 12)\r\n * - Calculates item widths based on span values (1-col through total columns)\r\n * - Supports responsive spans: `span-lg`, `span-md`, `span-sm`, `span-xs`\r\n * - Clamps span values to valid range (1 to column count)\r\n *\r\n * - Supports unified `gap` property\r\n * - Optional `gapX` and `gapY` for separate horizontal/vertical spacing\r\n * - Gap values can use any CSS unit (px, rem, em, %, etc.)\r\n *\r\n * @example\r\n * ```html\r\n * <sky-flexbox col=\"12\" gap=\"16px\">\r\n *   <sky-flexcol span=\"8\" span-md=\"12\">\r\n *     Main content\r\n *   </sky-flexcol>\r\n *   <sky-flexcol span=\"4\" span-md=\"12\">\r\n *     Sidebar\r\n *   </sky-flexcol>\r\n * </sky-flexbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-flexbox col=\"12\" gap=\"16px\">\r\n *     <sky-flexcol span=\"8\" span-md=\"12\">Main content</sky-flexcol>\r\n *     <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *   </sky-flexbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-flexbox col=\"12\" gap=\"16px\">\r\n *       <sky-flexcol span=\"8\" span-md=\"12\">Main content</sky-flexcol>\r\n *       <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *     </sky-flexbox>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-flexbox\")\r\nexport class SkyFlexbox extends LitElement {\r\n  /**\r\n   * Flex direction.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  direction: SkyFlexboxDirection = \"row\";\r\n\r\n  /**\r\n   * Wrap behavior.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  wrap: SkyFlexboxWrap = \"wrap\";\r\n\r\n  /**\r\n   * Main axis justification.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  justify: SkyFlexboxJustify = \"flex-start\";\r\n\r\n  /**\r\n   * Cross axis alignment.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  align: SkyFlexboxAlign = \"stretch\";\r\n\r\n  /**\r\n   * Multi-line alignment (when wrapping).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  alignContent: SkyFlexboxAlignContent = \"normal\";\r\n\r\n  /**\r\n   * Shorthand gap; used if gapX/gapY not provided.\r\n   * @public\r\n   */\r\n  @property({ type: String }) gap: string = \"16px\";\r\n\r\n  /**\r\n   * Column gap.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  gapX?: string;\r\n\r\n  /**\r\n   * Row gap.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  gapY?: string;\r\n\r\n  /**\r\n   * Total columns used for span calculation.\r\n   * @public\r\n   */\r\n  @property({ type: Number }) col: number = 12;\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n    }\r\n\r\n    .flex-container {\r\n      display: flex;\r\n      box-sizing: border-box;\r\n      flex-wrap: var(--wrap, wrap);\r\n      gap: var(--gap-y, var(--gap, 16px)) var(--gap-x, var(--gap, 16px));\r\n      justify-content: var(--justify, flex-start);\r\n      align-items: var(--align, stretch);\r\n      align-content: var(--align-content, normal);\r\n      flex-direction: var(--direction, row);\r\n    }\r\n\r\n    /* Default behaviour for any slotted child: */\r\n    ::slotted(*) {\r\n      box-sizing: border-box;\r\n      min-width: 0;\r\n    }\r\n\r\n    .flex-container.is-row ::slotted(*) {\r\n      flex-grow: 0;\r\n      flex-shrink: 1;\r\n      flex-basis: auto;\r\n      max-width: none;\r\n    }\r\n\r\n    .flex-container.is-row ::slotted([data-flex-span]) {\r\n      flex-shrink: 0;\r\n      --span-current: var(--span, 1);\r\n      --span-width: calc(\r\n        100% * var(--span-current) / var(--columns, 12) -\r\n          var(--gap-x, var(--gap, 16px)) *\r\n          (var(--columns, 12) - var(--span-current)) / var(--columns, 12)\r\n      );\r\n\r\n      flex-basis: var(--span-width);\r\n      width: var(--span-width);\r\n      max-width: var(--span-width);\r\n    }\r\n\r\n    .flex-container.is-column ::slotted(*) {\r\n      width: 100%;\r\n      flex-basis: auto;\r\n      max-width: none;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    @media (max-width: 1200px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-lg, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 992px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-md, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-sm, var(--span-current));\r\n      }\r\n    }\r\n\r\n    @media (max-width: 576px) {\r\n      .flex-container.is-row ::slotted([data-flex-span]) {\r\n        --span-current: var(--span-xs, var(--span-current));\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */\r\n  private _childMo?: MutationObserver;\r\n\r\n  /** @protected */\r\n  override connectedCallback() {\r\n    super.connectedCallback();\r\n    this._childMo = new MutationObserver(() => this.updateSpans());\r\n    this._childMo.observe(this, {\r\n      childList: true,\r\n      subtree: true,\r\n      attributes: true,\r\n      attributeFilter: [\"span\", \"span-lg\", \"span-md\", \"span-sm\", \"span-xs\"],\r\n    });\r\n  }\r\n\r\n  /** @protected */\r\n  override disconnectedCallback() {\r\n    super.disconnectedCallback();\r\n    this._childMo?.disconnect();\r\n  }\r\n\r\n  /** @protected */\r\n  override firstUpdated() {\r\n    this.syncVars();\r\n    this.updateSpans(); // initial\r\n  }\r\n\r\n  /** @protected */\r\n  override updated(changed: Map<string | number | symbol, unknown>) {\r\n    if (\r\n      changed.has(\"wrap\") ||\r\n      changed.has(\"gap\") ||\r\n      changed.has(\"gapX\") ||\r\n      changed.has(\"gapY\") ||\r\n      changed.has(\"col\") ||\r\n      changed.has(\"justify\") ||\r\n      changed.has(\"direction\") ||\r\n      changed.has(\"align\") ||\r\n      changed.has(\"alignContent\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n    if (changed.has(\"col\")) {\r\n      this.updateSpans(); // re-validate span bounds when column count changes\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Syncs component properties to CSS custom properties.\r\n   * @private\r\n   */\r\n  private syncVars() {\r\n    const styles = {\r\n      \"--wrap\": this.wrap,\r\n      \"--gap\": this.gap,\r\n      \"--gap-x\": this.gapX ?? this.gap,\r\n      \"--gap-y\": this.gapY ?? this.gap,\r\n      \"--columns\": String(this.col),\r\n      \"--justify\": this.justify,\r\n      \"--direction\": this.direction,\r\n      \"--align\": this.align,\r\n      \"--align-content\": this.alignContent,\r\n    } as Record<string, string>;\r\n    Object.entries(styles).forEach(([k, v]) => this.style.setProperty(k, v));\r\n  }\r\n\r\n  /**\r\n   * Forces recalculation of spans for all child elements.\r\n   * Useful when dynamically adding/removing items.\r\n   * @public\r\n   */\r\n  public recalculateSpans() {\r\n    this.updateSpans();\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    const isColumn =\r\n      this.direction === \"column\" || this.direction === \"column-reverse\";\r\n\r\n    return html`\r\n      <div\r\n        class=\"flex-container ${isColumn ? \"is-column\" : \"is-row\"}\"\r\n        part=\"container\"\r\n      >\r\n        <slot @slotchange=${this.updateSpans}></slot>\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  /**\r\n   * Reads span attributes off slotted children and maps them to CSS vars:\r\n   * span, span-lg, span-md, span-sm, span-xs\r\n   * @private\r\n   */\r\n  private updateSpans = () => {\r\n    const nodes =\r\n      this.shadowRoot\r\n        ?.querySelector(\"slot\")\r\n        ?.assignedElements({ flatten: true }) ?? [];\r\n    for (const el of nodes) {\r\n      if (!(el instanceof HTMLElement)) continue;\r\n\r\n      this.applySpanVar(el, \"--span\", this.readSpanRaw(el, \"span\", \"span\"));\r\n      this.applySpanVar(el, \"--span-lg\", this.readSpanRaw(el, \"span-lg\", \"spanLg\"));\r\n      this.applySpanVar(el, \"--span-md\", this.readSpanRaw(el, \"span-md\", \"spanMd\"));\r\n      this.applySpanVar(el, \"--span-sm\", this.readSpanRaw(el, \"span-sm\", \"spanSm\"));\r\n      this.applySpanVar(el, \"--span-xs\", this.readSpanRaw(el, \"span-xs\", \"spanXs\"));\r\n\r\n      const hasSpan =\r\n        this.readSpanRaw(el, \"span\", \"span\") != null ||\r\n        this.readSpanRaw(el, \"span-lg\", \"spanLg\") != null ||\r\n        this.readSpanRaw(el, \"span-md\", \"spanMd\") != null ||\r\n        this.readSpanRaw(el, \"span-sm\", \"spanSm\") != null ||\r\n        this.readSpanRaw(el, \"span-xs\", \"spanXs\") != null;\r\n\r\n      if (hasSpan) el.dataset.flexSpan = \"\";\r\n      else delete el.dataset.flexSpan;\r\n    }\r\n  };\r\n\r\n  /**\r\n   * Reads a span value from an HTML attribute or element property.\r\n   * @private\r\n   */\r\n  private readSpanRaw(\r\n    el: HTMLElement,\r\n    attrName: string,\r\n    propName: string,\r\n  ): string | null {\r\n    const fromAttr = el.getAttribute(attrName);\r\n    if (fromAttr != null && fromAttr !== \"\") return fromAttr;\r\n    const fromProp = (el as unknown as Record<string, unknown>)[propName];\r\n    if (fromProp != null && fromProp !== \"\") return String(fromProp);\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Sets or clears a span CSS variable on a slotted child.\r\n   * @private\r\n   */\r\n  private applySpanVar(\r\n    el: HTMLElement,\r\n    cssVar: string,\r\n    raw: string | null,\r\n  ): void {\r\n    const value = this.clampSpan(raw);\r\n    if (value) el.style.setProperty(cssVar, String(value));\r\n    else el.style.removeProperty(cssVar);\r\n  }\r\n\r\n  /**\r\n   * Clamps span value to valid range (1 to column count).\r\n   * @param raw - Raw span value from attribute\r\n   * @returns Clamped number or null if invalid\r\n   * @private\r\n   */\r\n  private clampSpan(raw: string | null): number | null {\r\n    if (!raw) return null;\r\n    const n = Math.max(1, Math.min(this.col, Number(raw) || 1));\r\n    return n;\r\n  }\r\n}\r\n"],"names":["SkyFlexbox","LitElement","constructor","super","arguments","this","direction","wrap","justify","align","alignContent","gap","col","updateSpans","nodes","shadowRoot","querySelector","assignedElements","flatten","el","HTMLElement","applySpanVar","readSpanRaw","dataset","flexSpan","connectedCallback","_childMo","MutationObserver","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","disconnect","firstUpdated","syncVars","updated","changed","has","styles","gapX","gapY","String","Object","entries","forEach","k","v","style","setProperty","recalculateSpans","render","isColumn","html","attrName","propName","fromAttr","getAttribute","fromProp","cssVar","raw","value","clampSpan","removeProperty","Math","max","min","Number","css","__decorateClass","property","type","prototype","customElement"],"mappings":"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"}

package/dist/sky-flexcol/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/sky-flexcol/sky-flexcol.js

@@ -1,4 +1,4 @@
-import{__decorate as s,__metadata as t}from"tslib";import{LitElement as e,css as r,html as i}from"lit";import{property as o,customElement as p}from"lit/decorators.js";let n=class extends e{constructor(){super(...arguments),this.span=1,this.grow=0,this.shrink=0,this.basis=null}static{this.styles=r`
+import{css as s,LitElement as t,html as r}from"lit";import{property as e,customElement as o}from"lit/decorators.js";var i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,p=(s,t,r,e)=>{for(var o,p=e>1?void 0:e?a(t,r):t,n=s.length-1;n>=0;n--)(o=s[n])&&(p=(e?o(t,r,p):o(p))||p);return e&&p&&i(t,r,p),p};let n=class extends t{constructor(){super(...arguments),this.span=1,this.grow=0,this.shrink=0,this.basis=null}firstUpdated(){this.syncVars()}updated(s){(s.has("span")||s.has("spanLg")||s.has("spanMd")||s.has("spanSm")||s.has("spanXs")||s.has("grow")||s.has("shrink")||s.has("basis")||s.has("order")||s.has("alignSelf"))&&this.syncVars()}syncVars(){this.style.setProperty("--span",String(this.span)),this.spanLg&&this.style.setProperty("--span-lg",String(this.spanLg)),this.spanMd&&this.style.setProperty("--span-md",String(this.spanMd)),this.spanSm&&this.style.setProperty("--span-sm",String(this.spanSm)),this.spanXs&&this.style.setProperty("--span-xs",String(this.spanXs)),this.style.setProperty("--col-grow",String(this.grow)),this.style.setProperty("--col-shrink",String(this.shrink)),null!=this.order?this.style.setProperty("--col-order",String(this.order)):this.style.removeProperty("--col-order"),this.alignSelf?this.style.setProperty("--col-align-self",this.alignSelf):this.style.removeProperty("--col-align-self"),this.basis?this.style.setProperty("--col-basis",this.basis):this.style.removeProperty("--col-basis")}refreshStyles(){this.syncVars()}getSpan(){return this.span}setSpan(s){this.span=s,this.syncVars()}render(){return r` <slot part="col"></slot> `}};n.styles=s`
     :host {
       display: block;
       box-sizing: border-box;
@@ -10,5 +10,5 @@ import{__decorate as s,__metadata as t}from"tslib";import{LitElement as e,css as
       /* If you set basis, it will override the basis calc coming from container's ::slotted(*) */
       flex-basis: var(--col-basis, auto);
     }
-  `}firstUpdated(){this.syncVars()}updated(s){(s.has("span")||s.has("spanLg")||s.has("spanMd")||s.has("spanSm")||s.has("spanXs")||s.has("grow")||s.has("shrink")||s.has("basis")||s.has("order")||s.has("alignSelf"))&&this.syncVars()}syncVars(){this.style.setProperty("--span",String(this.span)),this.spanLg&&this.style.setProperty("--span-lg",String(this.spanLg)),this.spanMd&&this.style.setProperty("--span-md",String(this.spanMd)),this.spanSm&&this.style.setProperty("--span-sm",String(this.spanSm)),this.spanXs&&this.style.setProperty("--span-xs",String(this.spanXs)),this.style.setProperty("--col-grow",String(this.grow)),this.style.setProperty("--col-shrink",String(this.shrink)),null!=this.order?this.style.setProperty("--col-order",String(this.order)):this.style.removeProperty("--col-order"),this.alignSelf?this.style.setProperty("--col-align-self",this.alignSelf):this.style.removeProperty("--col-align-self"),this.basis?this.style.setProperty("--col-basis",this.basis):this.style.removeProperty("--col-basis")}refreshStyles(){this.syncVars()}getSpan(){return this.span}setSpan(s){this.span=s,this.syncVars()}render(){return i` <slot part="col"></slot> `}};s([o({type:Number}),t("design:type",Object)],n.prototype,"span",void 0),s([o({type:Number}),t("design:type",Number)],n.prototype,"spanLg",void 0),s([o({type:Number}),t("design:type",Number)],n.prototype,"spanMd",void 0),s([o({type:Number}),t("design:type",Number)],n.prototype,"spanSm",void 0),s([o({type:Number}),t("design:type",Number)],n.prototype,"spanXs",void 0),s([o({type:Number}),t("design:type",Object)],n.prototype,"grow",void 0),s([o({type:Number}),t("design:type",Object)],n.prototype,"shrink",void 0),s([o({type:String}),t("design:type",Object)],n.prototype,"basis",void 0),s([o({type:Number}),t("design:type",Number)],n.prototype,"order",void 0),s([o({type:String}),t("design:type",String)],n.prototype,"alignSelf",void 0),n=s([p("sky-flexcol")],n);export{n as SkyFlexcol};
+  `,p([e({type:Number})],n.prototype,"span",2),p([e({type:Number})],n.prototype,"spanLg",2),p([e({type:Number})],n.prototype,"spanMd",2),p([e({type:Number})],n.prototype,"spanSm",2),p([e({type:Number})],n.prototype,"spanXs",2),p([e({type:Number})],n.prototype,"grow",2),p([e({type:Number})],n.prototype,"shrink",2),p([e({type:String})],n.prototype,"basis",2),p([e({type:Number})],n.prototype,"order",2),p([e({type:String})],n.prototype,"alignSelf",2),n=p([o("sky-flexcol")],n);export{n as SkyFlexcol};
 //# sourceMappingURL=sky-flexcol.js.map

package/dist/sky-flexcol/sky-flexcol.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-flexcol.js","sources":["../../src/sky-flexcol/sky-flexcol.ts"],"sourcesContent":[null],"names":["SkyFlexcol","LitElement","constructor","this","span","grow","shrink","basis","styles","css","firstUpdated","syncVars","updated","changed","has","style","setProperty","String","spanLg","spanMd","spanSm","spanXs","order","removeProperty","alignSelf","refreshStyles","getSpan","setSpan","value","render","html","__decorate","property","type","Number","prototype","customElement"],"mappings":"uKAkFO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAMLC,KAAAC,KAAO,EAmCPD,KAAAE,KAAO,EAOPF,KAAAG,OAAS,EAOTH,KAAAI,MAAuB,IAwHzB,QAxGgBJ,KAAAK,OAASC,CAAG;;;;;;;;;;;;GAYxB,CAGO,YAAAC,GACPP,KAAKQ,UACP,CAGS,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,eAEZX,KAAKQ,UAET,CAMQ,QAAAA,GAENR,KAAKY,MAAMC,YAAY,SAAUC,OAAOd,KAAKC,OACzCD,KAAKe,QAAQf,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKe,SAC7Df,KAAKgB,QAAQhB,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKgB,SAC7DhB,KAAKiB,QAAQjB,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKiB,SAC7DjB,KAAKkB,QAAQlB,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKkB,SAGjElB,KAAKY,MAAMC,YAAY,aAAcC,OAAOd,KAAKE,OACjDF,KAAKY,MAAMC,YAAY,eAAgBC,OAAOd,KAAKG,SAEjC,MAAdH,KAAKmB,MACPnB,KAAKY,MAAMC,YAAY,cAAeC,OAAOd,KAAKmB,QAElDnB,KAAKY,MAAMQ,eAAe,eAGxBpB,KAAKqB,UACPrB,KAAKY,MAAMC,YAAY,mBAAoBb,KAAKqB,WAEhDrB,KAAKY,MAAMQ,eAAe,oBAGxBpB,KAAKI,MACPJ,KAAKY,MAAMC,YAAY,cAAeb,KAAKI,OAE3CJ,KAAKY,MAAMQ,eAAe,cAE9B,CAOO,aAAAE,GACLtB,KAAKQ,UACP,CAOO,OAAAe,GACL,OAAOvB,KAAKC,IACd,CAOO,OAAAuB,CAAQC,GACbzB,KAAKC,KAAOwB,EACZzB,KAAKQ,UACP,CAGS,MAAAkB,GACP,OAAOC,CAAI,4BACb,GAxKAC,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACTlC,EAAAmC,UAAA,eAOTJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACTlC,EAAAmC,UAAA,eAOTJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACPlC,EAAAmC,UAAA,iBAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMhB,kCACUjB,EAAAmC,UAAA,gBAO5BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACHlC,EAAAmC,UAAA,gBAOfJ,EAAA,CADCC,EAAS,CAAEC,KAAMhB,kCACcjB,EAAAmC,UAAA,oBArErBnC,EAAU+B,EAAA,CADtBK,EAAc,gBACFpC"}
+{"version":3,"file":"sky-flexcol.js","sources":["../../src/sky-flexcol/sky-flexcol.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\n\r\nexport type SkyFlexcolAlignSelf =\r\n  | \"auto\"\r\n  | \"flex-start\"\r\n  | \"center\"\r\n  | \"flex-end\"\r\n  | \"stretch\"\r\n  | \"baseline\";\r\n\r\n/**\r\n * @element sky-flexcol\r\n *\r\n * @summary Flex column item for `sky-flexbox` layouts with responsive span controls.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/flexbox\r\n *\r\n * @slot - Default slot for column content.\r\n *\r\n * @property {number} span - Base number of columns to span.\r\n * @property {number | undefined} spanLg - Span at large breakpoints.\r\n * @property {number | undefined} spanMd - Span at medium breakpoints.\r\n * @property {number | undefined} spanSm - Span at small breakpoints.\r\n * @property {number | undefined} spanXs - Span at extra-small breakpoints.\r\n * @property {number} grow - Flex grow factor.\r\n * @property {number} shrink - Flex shrink factor.\r\n * @property {string | null} basis - Flex basis override.\r\n * @property {number | undefined} order - Flex order override.\r\n * @property {SkyFlexcolAlignSelf | undefined} alignSelf - Cross-axis alignment override.\r\n * @method refreshStyles Re-applies CSS custom properties from current values.\r\n * @method getSpan Returns current base span value.\r\n * @method setSpan Updates base span value and refreshes styles.\r\n *\r\n * @csspart col - The flex item wrapper.\r\n *\r\n * @Behavior\r\n * - Designed to work within `<sky-flexbox>` containers\r\n * - Supports responsive column spans with breakpoint attributes\r\n * - Exposes all standard flex item properties\r\n * - Automatically syncs properties to CSS custom properties\r\n *\r\n * - `span`: Base span across columns (1 to container's column count)\r\n * - `span-lg`: Span at large screens (≤1200px)\r\n * - `span-md`: Span at medium screens (≤992px)\r\n * - `span-sm`: Span at small screens (≤768px)\r\n * - `span-xs`: Span at extra-small screens (≤576px)\r\n *\r\n * @example\r\n * ```html\r\n * <sky-flexbox col=\"12\" gap=\"16px\">\r\n *   <sky-flexcol span=\"8\">\r\n *     <div class=\"card\">Main Content</div>\r\n *   </sky-flexcol>\r\n *   <sky-flexcol span=\"4\">\r\n *     <div class=\"card\">Sidebar</div>\r\n *   </sky-flexcol>\r\n * </sky-flexbox>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-flexbox col=\"12\" gap=\"16px\">\r\n *     <sky-flexcol span=\"8\" span-md=\"12\">Main Content</sky-flexcol>\r\n *     <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *   </sky-flexbox>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-flexbox col=\"12\" gap=\"16px\">\r\n *       <sky-flexcol span=\"8\" span-md=\"12\">Main Content</sky-flexcol>\r\n *       <sky-flexcol span=\"4\" span-md=\"12\">Sidebar</sky-flexcol>\r\n *     </sky-flexbox>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-flexcol\")\r\nexport class SkyFlexcol extends LitElement {\r\n  /**\r\n   * Number of columns to span.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  span = 1;\r\n\r\n  /**\r\n   * Columns spanned at large screens (≤1200px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanLg?: number;\r\n\r\n  /**\r\n   * Columns spanned at medium screens (≤992px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanMd?: number;\r\n\r\n  /**\r\n   * Columns spanned at small screens (≤768px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanSm?: number;\r\n\r\n  /**\r\n   * Columns spanned at extra-small screens (≤576px).\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  spanXs?: number;\r\n\r\n  /**\r\n   * Flex grow factor.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  grow = 0;\r\n\r\n  /**\r\n   * Flex shrink factor.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  shrink = 0;\r\n\r\n  /**\r\n   * Flex basis (e.g., `\"200px\"` or `\"auto\"`).\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  basis: string | null = null;\r\n\r\n  /**\r\n   * Flex order relative to siblings.\r\n   * @public\r\n   */\r\n  @property({ type: Number })\r\n  order?: number;\r\n\r\n  /**\r\n   * Self alignment override.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  alignSelf?: SkyFlexcolAlignSelf;\r\n\r\nstatic override styles = css`\r\n    :host {\r\n      display: block;\r\n      box-sizing: border-box;\r\n      /* These are read by the container’s ::slotted(*) rules */\r\n      flex-grow: var(--col-grow, 0);\r\n      flex-shrink: var(--col-shrink, 0);\r\n      order: var(--col-order, 0);\r\n      align-self: var(--col-align-self, auto);\r\n      /* If you set basis, it will override the basis calc coming from container's ::slotted(*) */\r\n      flex-basis: var(--col-basis, auto);\r\n    }\r\n  `;\r\n\r\n  /** @protected */\r\n  override firstUpdated() {\r\n    this.syncVars();\r\n  }\r\n\r\n  /** @protected */\r\n  override updated(changed: Map<string | number | symbol, unknown>) {\r\n    if (\r\n      changed.has(\"span\") ||\r\n      changed.has(\"spanLg\") ||\r\n      changed.has(\"spanMd\") ||\r\n      changed.has(\"spanSm\") ||\r\n      changed.has(\"spanXs\") ||\r\n      changed.has(\"grow\") ||\r\n      changed.has(\"shrink\") ||\r\n      changed.has(\"basis\") ||\r\n      changed.has(\"order\") ||\r\n      changed.has(\"alignSelf\")\r\n    ) {\r\n      this.syncVars();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Syncs component properties to CSS custom properties.\r\n   * @private\r\n   */\r\n  private syncVars() {\r\n    // Span properties\r\n    this.style.setProperty(\"--span\", String(this.span));\r\n    if (this.spanLg) this.style.setProperty(\"--span-lg\", String(this.spanLg));\r\n    if (this.spanMd) this.style.setProperty(\"--span-md\", String(this.spanMd));\r\n    if (this.spanSm) this.style.setProperty(\"--span-sm\", String(this.spanSm));\r\n    if (this.spanXs) this.style.setProperty(\"--span-xs\", String(this.spanXs));\r\n\r\n    // Flex properties\r\n    this.style.setProperty(\"--col-grow\", String(this.grow));\r\n    this.style.setProperty(\"--col-shrink\", String(this.shrink));\r\n\r\n    if (this.order != null) {\r\n      this.style.setProperty(\"--col-order\", String(this.order));\r\n    } else {\r\n      this.style.removeProperty(\"--col-order\");\r\n    }\r\n\r\n    if (this.alignSelf) {\r\n      this.style.setProperty(\"--col-align-self\", this.alignSelf);\r\n    } else {\r\n      this.style.removeProperty(\"--col-align-self\");\r\n    }\r\n\r\n    if (this.basis) {\r\n      this.style.setProperty(\"--col-basis\", this.basis);\r\n    } else {\r\n      this.style.removeProperty(\"--col-basis\");\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Forces resynchronization of CSS custom properties.\r\n   * Useful when properties are changed programmatically.\r\n   * @public\r\n   */\r\n  public refreshStyles() {\r\n    this.syncVars();\r\n  }\r\n\r\n  /**\r\n   * Gets the current span value.\r\n   * @returns Current span value\r\n   * @public\r\n   */\r\n  public getSpan(): number {\r\n    return this.span;\r\n  }\r\n\r\n  /**\r\n   * Sets the span value and updates styles.\r\n   * @param value - New span value\r\n   * @public\r\n   */\r\n  public setSpan(value: number): void {\r\n    this.span = value;\r\n    this.syncVars();\r\n  }\r\n\r\n  /** @protected */\r\n  override render() {\r\n    return html` <slot part=\"col\"></slot> `;\r\n  }\r\n}\r\n"],"names":["SkyFlexcol","LitElement","constructor","super","arguments","this","span","grow","shrink","basis","firstUpdated","syncVars","updated","changed","has","style","setProperty","String","spanLg","spanMd","spanSm","spanXs","order","removeProperty","alignSelf","refreshStyles","getSpan","setSpan","value","render","html","styles","css","__decorateClass","property","type","Number","prototype","customElement"],"mappings":"oTAkFO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,GAAAC,SAAAC,WAMLC,KAAAC,KAAO,EAmCPD,KAAAE,KAAO,EAOPF,KAAAG,OAAS,EAOTH,KAAAI,MAAuB,IAAA,CA+Bd,YAAAC,GACPL,KAAKM,UACP,CAGS,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,eAEZT,KAAKM,UAET,CAMQ,QAAAA,GAENN,KAAKU,MAAMC,YAAY,SAAUC,OAAOZ,KAAKC,OACzCD,KAAKa,QAAQb,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKa,SAC7Db,KAAKc,QAAQd,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKc,SAC7Dd,KAAKe,QAAQf,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKe,SAC7Df,KAAKgB,QAAQhB,KAAKU,MAAMC,YAAY,YAAaC,OAAOZ,KAAKgB,SAGjEhB,KAAKU,MAAMC,YAAY,aAAcC,OAAOZ,KAAKE,OACjDF,KAAKU,MAAMC,YAAY,eAAgBC,OAAOZ,KAAKG,SAEjC,MAAdH,KAAKiB,MACPjB,KAAKU,MAAMC,YAAY,cAAeC,OAAOZ,KAAKiB,QAElDjB,KAAKU,MAAMQ,eAAe,eAGxBlB,KAAKmB,UACPnB,KAAKU,MAAMC,YAAY,mBAAoBX,KAAKmB,WAEhDnB,KAAKU,MAAMQ,eAAe,oBAGxBlB,KAAKI,MACPJ,KAAKU,MAAMC,YAAY,cAAeX,KAAKI,OAE3CJ,KAAKU,MAAMQ,eAAe,cAE9B,CAOO,aAAAE,GACLpB,KAAKM,UACP,CAOO,OAAAe,GACL,OAAOrB,KAAKC,IACd,CAOO,OAAAqB,CAAQC,GACbvB,KAAKC,KAAOsB,EACZvB,KAAKM,UACP,CAGS,MAAAkB,GACP,OAAOC,CAAA,4BACT,GA9KW9B,EAuEG+B,OAASC,CAAA;;;;;;;;;;;;IAjEvBC,EAAA,CADCC,EAAS,CAAEC,KAAMC,UALPpC,EAMXqC,UAAA,OAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAZPpC,EAaXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAnBPpC,EAoBXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA1BPpC,EA2BXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAjCPpC,EAkCXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UAxCPpC,EAyCXqC,UAAA,OAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA/CPpC,EAgDXqC,UAAA,SAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMlB,UAtDPjB,EAuDXqC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,UA7DPpC,EA8DXqC,UAAA,QAAA,GAOAJ,EAAA,CADCC,EAAS,CAAEC,KAAMlB,UApEPjB,EAqEXqC,UAAA,YAAA,GArEWrC,EAANiC,EAAA,CADNK,EAAc,gBACFtC"}

package/dist/sky-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/sky-form/sky-form.js

@@ -1,4 +1,4 @@
-import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,nothing as s,html as r}from"lit";import{property as o,state as n,query as a,customElement as d}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";let h=class extends i{constructor(){super(...arguments),this.liveValidation=!1,this.showErrors=!0,this.errorBox=!1,this.errorBoxMessage="Fix These Issues Before Submitting",this.mode="client",this.noValidate=!1,this.enterSubmit=!1,this.resetOnSubmit=!1,this.csrfToken=null,this.validationErrors=[],this.submitSuccess=!1,this.validationActive=!1,this._syncQueued=!1,this._handlingSubmit=!1,this._handlingInvalid=!1,this._onEnterKey=t=>{if(!this.enterSubmit)return;if("Enter"!==t.key)return;const e=t.target;e instanceof HTMLTextAreaElement||e.closest('button[type="submit"], input[type="submit"]')||(t.preventDefault(),this.requestSubmit())},this._handleValueChanged=t=>{if(!this.liveValidation)return;t.target.matches("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea")&&(this._queueSync(),this._emitFormChange())},this._onFormDataCapture=t=>{t.target instanceof HTMLFormElement&&t.target===this._formEl&&t.stopImmediatePropagation()},this._onInvalidCapture=t=>{const e=t.target;e?.form&&e.form!==this._formEl||(t.preventDefault(),t.stopImmediatePropagation(),this._activateValidation(),this._focusFirstInvalid())},this._onHostSubmitCapture=t=>{if(t.target instanceof HTMLFormElement&&t.target===this._formEl&&!this._handlingSubmit){this._handlingSubmit=!0;try{this._syncNow();if(!this._formEl.checkValidity())return t.preventDefault(),t.stopImmediatePropagation(),this.submitSuccess=!1,void this._focusFirstInvalid();if("server"===this.mode)return this.submitSuccess=!0,void(this.resetOnSubmit&&queueMicrotask(()=>this.reset()));t.preventDefault(),t.stopImmediatePropagation();const e=new FormData(this._formEl);let i=!1;try{const t=new FormDataEvent("formdata",{formData:e,bubbles:!0,composed:!0});this.dispatchEvent(t),i=!0}catch{}i||this.dispatchEvent(new CustomEvent("formdata",{detail:{formData:e},bubbles:!0,composed:!0}));const s=this._formDataToJSON(e);this.dispatchEvent(new CustomEvent("form-submit",{detail:{values:s,formData:e,success:this._formEl.checkValidity()},bubbles:!0,composed:!0})),this.submitSuccess=!0,this.resetOnSubmit&&queueMicrotask(()=>this.reset())}finally{this._handlingSubmit=!1}}}}createRenderRoot(){return this}get formElement(){return this._formEl}connectedCallback(){super.connectedCallback(),this._queueSync(),this.addEventListener("submit",this._onHostSubmitCapture,!0),this.addEventListener("formdata",this._onFormDataCapture,!0),this.addEventListener("value-changed",this._handleValueChanged),this.addEventListener("keydown",this._onEnterKey,!0),this.addEventListener("invalid",this._onInvalidCapture,!0),this._mo=new MutationObserver(()=>this._queueSync()),this._mo.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("submit",this._onHostSubmitCapture,!0),this.removeEventListener("formdata",this._onFormDataCapture,!0),this.removeEventListener("value-changed",this._handleValueChanged),this.removeEventListener("keydown",this._onEnterKey,!0),this.removeEventListener("invalid",this._onInvalidCapture,!0),this._mo?.disconnect(),super.disconnectedCallback()}_queueSync(){this._syncQueued||(this._syncQueued=!0,queueMicrotask(()=>{this._syncQueued=!1,this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}))}_moveHostIdToNativeForm(){const t=this.id?.trim();t&&this._formEl&&(this._formEl.id!==t&&(this._formEl.id=t),this.id===t&&this.removeAttribute("id"))}_ensureNativeFormHasId(){if(!this._formEl?.id){const t="undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`${Date.now()}-${Math.random().toString(36).slice(2,9)}`;this._formEl.id=`sky-form-${t}`}}_formValidQuiet(){const t=this._formEl;if(!t)return!0;for(const e of Array.from(t.elements)){const t=e;if("validity"in t&&t.validity&&!("willValidate"in t&&!1===t.willValidate||t.validity.valid))return!1}return!0}_emitFormChange(){if(!this._formEl)return;const t=new FormData(this._formEl),e=this._formDataToJSON(t);this.dispatchEvent(new CustomEvent("form-change",{detail:{values:e,formData:t,success:this._formValidQuiet()},bubbles:!0,composed:!0}))}_assignFormOwnerToChildren(){const t=this._formEl?.id;if(!t)return;const e=Array.from(this.querySelectorAll(["input","select","textarea","button","sky-button","sky-input","sky-combobox","sky-datepicker","sky-checkbox","sky-radio-group","sky-otp","sky-serial","sky-counter","sky-switch"].join(",")));for(const i of e)i.closest("form")!==this._formEl&&i.form?.id!==t&&i.setAttribute("form",t)}_getSkyInputs(){return Array.from(this.querySelectorAll("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch"))}_emitValidationErrors(){this.dispatchEvent(new CustomEvent("validation-errors",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}))}_refreshAggregates(){const t=[],e=this._getSkyInputs();for(const i of e)this._handlingInvalid||"function"!=typeof i.validateInput||i.validateInput(),Array.isArray(i.validationErrors)&&t.push(...i.validationErrors);const i=Array.from(this._formEl.elements);for(const e of i){if(!("willValidate"in e)||!e.willValidate)continue;if(!(!("validity"in e)||!e.validity||e.validity.valid)){const i=e.validationMessage||`${e.name||e.id||"Field"} is invalid`;t.push(i)}}const s=[...new Set(t)];s.join("|")!==this.validationErrors.join("|")&&(this.validationErrors=s,this._emitValidationErrors())}_focusFirstInvalid(){const t=this._getSkyInputs().find(t=>!0===t.invalid);t&&this._focusElement(t)}_focusElement(t){const e="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;t.scrollIntoView({behavior:e?"auto":"smooth",block:"center"}),setTimeout(()=>{t.focus({preventScroll:!0})},100)}_syncNow(){this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}_formDataToJSON(t){const e={};return t.forEach((t,i)=>{i in e?Array.isArray(e[i])?e[i].push(t):e[i]=[e[i],t]:e[i]=t}),e}_activateValidation(){this.validationActive=!0;const t=this._getSkyInputs();for(const e of t)e.validationActive=!0,e.showErrors=!0;queueMicrotask(()=>this._refreshAggregates())}checkValidity(){return this._syncNow(),this._formEl?.checkValidity?.()??!0}reportValidity(){return this._syncNow(),this._formEl?.reportValidity?.()??!0}requestSubmit(t){this._syncNow(),this._activateValidation(),this._formEl?.requestSubmit?.(t)}reset(){this._queueSync(),this._formEl?.reset()}resetForm(){this._queueSync(),this._formEl?.reset()}submit(){if(this._activateValidation(),"client"===this.mode){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});this._formEl?.dispatchEvent(t)}else this._formEl?.submit()}render(){return r`
+import{LitElement as t,nothing as e,html as i}from"lit";import{property as r,state as s,query as o,customElement as a}from"lit/decorators.js";import{ifDefined as n}from"lit/directives/if-defined.js";var l=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(t,e,i,r)=>{for(var s,o=r>1?void 0:r?h(e,i):e,a=t.length-1;a>=0;a--)(s=t[a])&&(o=(r?s(e,i,o):s(o))||o);return r&&o&&l(e,i,o),o};let c=class extends t{constructor(){super(...arguments),this.liveValidation=!1,this.showErrors=!0,this.errorBox=!1,this.errorBoxMessage="Fix These Issues Before Submitting",this.mode="client",this.noValidate=!1,this.enterSubmit=!1,this.resetOnSubmit=!1,this.csrfToken=null,this.validationErrors=[],this.submitSuccess=!1,this.validationActive=!1,this._syncQueued=!1,this._handlingSubmit=!1,this._handlingInvalid=!1,this._onEnterKey=t=>{if(!this.enterSubmit)return;if("Enter"!==t.key)return;const e=t.target;e instanceof HTMLTextAreaElement||e.closest('button[type="submit"], input[type="submit"]')||(t.preventDefault(),this.requestSubmit())},this._handleValueChanged=t=>{if(!this.liveValidation)return;t.target.matches("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea")&&(this._queueSync(),this._emitFormChange())},this._onFormDataCapture=t=>{t.target instanceof HTMLFormElement&&t.target===this._formEl&&t.stopImmediatePropagation()},this._onInvalidCapture=t=>{const e=t.target;e?.form&&e.form!==this._formEl||(t.preventDefault(),t.stopImmediatePropagation(),this._activateValidation(),this._focusFirstInvalid())},this._onHostSubmitCapture=t=>{if(t.target instanceof HTMLFormElement&&t.target===this._formEl&&!this._handlingSubmit){this._handlingSubmit=!0;try{this._syncNow();if(!this._formEl.checkValidity())return t.preventDefault(),t.stopImmediatePropagation(),this.submitSuccess=!1,void this._focusFirstInvalid();if("server"===this.mode)return this.submitSuccess=!0,void(this.resetOnSubmit&&queueMicrotask(()=>this.reset()));t.preventDefault(),t.stopImmediatePropagation();const e=new FormData(this._formEl);let i=!1;try{const t=new FormDataEvent("formdata",{formData:e,bubbles:!0,composed:!0});this.dispatchEvent(t),i=!0}catch{}i||this.dispatchEvent(new CustomEvent("formdata",{detail:{formData:e},bubbles:!0,composed:!0}));const r=this._formDataToJSON(e);this.dispatchEvent(new CustomEvent("form-submit",{detail:{values:r,formData:e,success:this._formEl.checkValidity()},bubbles:!0,composed:!0})),this.submitSuccess=!0,this.resetOnSubmit&&queueMicrotask(()=>this.reset())}finally{this._handlingSubmit=!1}}}}createRenderRoot(){return this}get formElement(){return this._formEl}connectedCallback(){super.connectedCallback(),this._queueSync(),this.addEventListener("submit",this._onHostSubmitCapture,!0),this.addEventListener("formdata",this._onFormDataCapture,!0),this.addEventListener("value-changed",this._handleValueChanged),this.addEventListener("keydown",this._onEnterKey,!0),this.addEventListener("invalid",this._onInvalidCapture,!0),this._mo=new MutationObserver(()=>this._queueSync()),this._mo.observe(this,{childList:!0,subtree:!0})}disconnectedCallback(){this.removeEventListener("submit",this._onHostSubmitCapture,!0),this.removeEventListener("formdata",this._onFormDataCapture,!0),this.removeEventListener("value-changed",this._handleValueChanged),this.removeEventListener("keydown",this._onEnterKey,!0),this.removeEventListener("invalid",this._onInvalidCapture,!0),this._mo?.disconnect(),super.disconnectedCallback()}_queueSync(){this._syncQueued||(this._syncQueued=!0,queueMicrotask(()=>{this._syncQueued=!1,this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}))}_moveHostIdToNativeForm(){const t=this.id?.trim();t&&this._formEl&&(this._formEl.id!==t&&(this._formEl.id=t),this.id===t&&this.removeAttribute("id"))}_ensureNativeFormHasId(){if(!this._formEl?.id){const t="undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`${Date.now()}-${Math.random().toString(36).slice(2,9)}`;this._formEl.id=`sky-form-${t}`}}_formValidQuiet(){const t=this._formEl;if(!t)return!0;for(const e of Array.from(t.elements)){const t=e;if("validity"in t&&t.validity&&!("willValidate"in t&&!1===t.willValidate||t.validity.valid))return!1}return!0}_emitFormChange(){if(!this._formEl)return;const t=new FormData(this._formEl),e=this._formDataToJSON(t);this.dispatchEvent(new CustomEvent("form-change",{detail:{values:e,formData:t,success:this._formValidQuiet()},bubbles:!0,composed:!0}))}_assignFormOwnerToChildren(){const t=this._formEl?.id;if(!t)return;const e=Array.from(this.querySelectorAll(["input","select","textarea","button","sky-button","sky-input","sky-combobox","sky-datepicker","sky-checkbox","sky-radio-group","sky-otp","sky-serial","sky-counter","sky-switch"].join(",")));for(const i of e)i.closest("form")!==this._formEl&&i.form?.id!==t&&i.setAttribute("form",t)}_getSkyInputs(){return Array.from(this.querySelectorAll("sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch"))}_emitValidationErrors(){this.dispatchEvent(new CustomEvent("validation-errors",{detail:{errors:[...this.validationErrors]},bubbles:!0,composed:!0}))}_refreshAggregates(){const t=[],e=this._getSkyInputs();for(const i of e)this._handlingInvalid||"function"!=typeof i.validateInput||i.validateInput(),Array.isArray(i.validationErrors)&&t.push(...i.validationErrors);const i=Array.from(this._formEl.elements);for(const e of i){if(!("willValidate"in e)||!e.willValidate)continue;if(!(!("validity"in e)||!e.validity||e.validity.valid)){const i=e.validationMessage||`${e.name||e.id||"Field"} is invalid`;t.push(i)}}const r=[...new Set(t)];r.join("|")!==this.validationErrors.join("|")&&(this.validationErrors=r,this._emitValidationErrors())}_focusFirstInvalid(){const t=this._getSkyInputs().find(t=>!0===t.invalid);t&&this._focusElement(t)}_focusElement(t){const e="function"==typeof matchMedia&&matchMedia("(prefers-reduced-motion: reduce)").matches;t.scrollIntoView({behavior:e?"auto":"smooth",block:"center"}),setTimeout(()=>{t.focus({preventScroll:!0})},100)}_syncNow(){this._moveHostIdToNativeForm(),this._ensureNativeFormHasId(),this._assignFormOwnerToChildren(),this._refreshAggregates()}_formDataToJSON(t){const e={};return t.forEach((t,i)=>{i in e?Array.isArray(e[i])?e[i].push(t):e[i]=[e[i],t]:e[i]=t}),e}_activateValidation(){this.validationActive=!0;const t=this._getSkyInputs();for(const e of t)e.validationActive=!0,e.showErrors=!0;queueMicrotask(()=>this._refreshAggregates())}checkValidity(){return this._syncNow(),this._formEl?.checkValidity?.()??!0}reportValidity(){return this._syncNow(),this._formEl?.reportValidity?.()??!0}requestSubmit(t){this._syncNow(),this._activateValidation(),this._formEl?.requestSubmit?.(t)}reset(){this._queueSync(),this._formEl?.reset()}resetForm(){this._queueSync(),this._formEl?.reset()}submit(){if(this._activateValidation(),"client"===this.mode){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0});this._formEl?.dispatchEvent(t)}else this._formEl?.submit()}render(){return i`
       <style>
         /* Scoped to the sky-form tag: this is a light-DOM component, so
            unscoped class selectors would leak into the whole document. */
@@ -39,30 +39,30 @@ import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,nothin
 
       <form
         part="form"
-        method=${l(this.method)}
-        action=${l(this.action)}
-        enctype=${l(this.enctype)}
-        autocomplete=${l(this.autocomplete)}
+        method=${n(this.method)}
+        action=${n(this.action)}
+        enctype=${n(this.enctype)}
+        autocomplete=${n(this.autocomplete)}
         ?novalidate=${this.noValidate}
-        target=${l(this.target||void 0)}
+        target=${n(this.target||void 0)}
       >
-        ${this.csrfToken?r`<input
+        ${this.csrfToken?i`<input
               type="hidden"
               name="csrfmiddlewaretoken"
               .value=${this.csrfToken}
-            />`:s}
+            />`:e}
         <slot></slot>
       </form>
 
-      ${this.errorBox&&this.validationErrors.length>0&&this.showErrors&&this.validationActive?r`
+      ${this.errorBox&&this.validationErrors.length>0&&this.showErrors&&this.validationActive?i`
             <div class="error-wrapper" part="error-box">
               <div class="error-container">
                 <div class="error-title">${this.errorBoxMessage}</div>
                 <ul class="error-list" part="error-list">
-                  ${this.validationErrors.map(t=>r`<li class="error-item">${t}</li>`)}
+                  ${this.validationErrors.map(t=>i`<li class="error-item">${t}</li>`)}
                 </ul>
               </div>
             </div>
-          `:s}
-    `}};t([o({type:Boolean}),e("design:type",Object)],h.prototype,"liveValidation",void 0),t([o({type:Boolean}),e("design:type",Object)],h.prototype,"showErrors",void 0),t([o({type:Boolean}),e("design:type",Object)],h.prototype,"errorBox",void 0),t([o({type:String}),e("design:type",Object)],h.prototype,"errorBoxMessage",void 0),t([o({type:String}),e("design:type",String)],h.prototype,"mode",void 0),t([o({type:String}),e("design:type",String)],h.prototype,"method",void 0),t([o({type:String}),e("design:type",String)],h.prototype,"action",void 0),t([o({type:String}),e("design:type",String)],h.prototype,"target",void 0),t([o({type:String}),e("design:type",String)],h.prototype,"enctype",void 0),t([o({type:String}),e("design:type",String)],h.prototype,"autocomplete",void 0),t([o({type:Boolean}),e("design:type",Object)],h.prototype,"noValidate",void 0),t([o({type:Boolean}),e("design:type",Object)],h.prototype,"enterSubmit",void 0),t([o({type:Boolean}),e("design:type",Object)],h.prototype,"resetOnSubmit",void 0),t([o({type:String}),e("design:type",Object)],h.prototype,"csrfToken",void 0),t([n(),e("design:type",Array)],h.prototype,"validationErrors",void 0),t([n(),e("design:type",Object)],h.prototype,"submitSuccess",void 0),t([n(),e("design:type",Object)],h.prototype,"validationActive",void 0),t([a("form"),e("design:type",HTMLFormElement)],h.prototype,"_formEl",void 0),h=t([d("sky-form")],h);export{h as SkyForm};
+          `:e}
+    `}};d([r({type:Boolean})],c.prototype,"liveValidation",2),d([r({type:Boolean})],c.prototype,"showErrors",2),d([r({type:Boolean})],c.prototype,"errorBox",2),d([r({type:String})],c.prototype,"errorBoxMessage",2),d([r({type:String})],c.prototype,"mode",2),d([r({type:String})],c.prototype,"method",2),d([r({type:String})],c.prototype,"action",2),d([r({type:String})],c.prototype,"target",2),d([r({type:String})],c.prototype,"enctype",2),d([r({type:String})],c.prototype,"autocomplete",2),d([r({type:Boolean})],c.prototype,"noValidate",2),d([r({type:Boolean})],c.prototype,"enterSubmit",2),d([r({type:Boolean})],c.prototype,"resetOnSubmit",2),d([r({type:String})],c.prototype,"csrfToken",2),d([s()],c.prototype,"validationErrors",2),d([s()],c.prototype,"submitSuccess",2),d([s()],c.prototype,"validationActive",2),d([o("form")],c.prototype,"_formEl",2),c=d([a("sky-form")],c);export{c as SkyForm};
 //# sourceMappingURL=sky-form.js.map

package/dist/sky-form/sky-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"sky-form.js","sources":["../../src/sky-form/sky-form.ts"],"sourcesContent":[null],"names":["SkyForm","LitElement","constructor","this","liveValidation","showErrors","errorBox","errorBoxMessage","mode","noValidate","enterSubmit","resetOnSubmit","csrfToken","validationErrors","submitSuccess","validationActive","_syncQueued","_handlingSubmit","_handlingInvalid","_onEnterKey","e","key","target","HTMLTextAreaElement","closest","preventDefault","requestSubmit","_handleValueChanged","matches","_queueSync","_emitFormChange","_onFormDataCapture","HTMLFormElement","_formEl","stopImmediatePropagation","_onInvalidCapture","t","form","_activateValidation","_focusFirstInvalid","_onHostSubmitCapture","_syncNow","checkValidity","queueMicrotask","reset","fd","FormData","dispatched","fde","FormDataEvent","formData","bubbles","composed","dispatchEvent","CustomEvent","detail","json","_formDataToJSON","values","success","createRenderRoot","formElement","connectedCallback","super","addEventListener","_mo","MutationObserver","observe","childList","subtree","disconnectedCallback","removeEventListener","disconnect","_moveHostIdToNativeForm","_ensureNativeFormHasId","_assignFormOwnerToChildren","_refreshAggregates","hostId","id","trim","removeAttribute","suffix","crypto","randomUUID","Date","now","Math","random","toString","slice","_formValidQuiet","el","Array","from","elements","h","validity","willValidate","valid","formId","candidates","querySelectorAll","join","setAttribute","_getSkyInputs","_emitValidationErrors","errors","errs","skyInputs","input","validateInput","isArray","push","msg","validationMessage","name","next","Set","firstInvalid","find","invalid","_focusElement","element","prefersReducedMotion","matchMedia","scrollIntoView","behavior","block","setTimeout","focus","preventScroll","obj","forEach","value","reportValidity","submitter","resetForm","submit","submitEvent","SubmitEvent","cancelable","render","html","ifDefined","method","action","enctype","autocomplete","undefined","nothing","length","map","err","__decorate","property","type","Boolean","prototype","String","state","query","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-form.js","sources":["../../src/sky-form/sky-form.ts"],"sourcesContent":["import { LitElement, html, nothing, css } from \"lit\";\r\nimport { customElement, property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nexport type SkyFormMode = \"client\" | \"server\";\r\nexport type SkyFormMethod = \"get\" | \"post\";\r\nexport type SkyFormEnctype =\r\n  | \"application/x-www-form-urlencoded\"\r\n  | \"multipart/form-data\"\r\n  | \"text/plain\";\r\nexport type SkyFormAutocomplete = \"on\" | \"off\";\r\nexport type SkyFormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>;\r\nexport type SkyFormChangeDetail = { values: SkyFormValues; formData: FormData; success: boolean };\r\nexport type SkyFormValidationErrorsDetail = { errors: string[] };\r\nexport type SkyFormSubmitDetail = { values: SkyFormValues; formData: FormData; success: boolean };\r\nexport type SkyFormFormDataFallbackDetail = { formData: FormData };\r\n\r\n/**\r\n * @element sky-form\r\n *\r\n * @summary Form wrapper with unified validation, error aggregation, and client/server submit flows.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://library.sky-ui.com/components/form\r\n *\r\n * @slot - Form elements: inputs, buttons, and other form controls.\r\n *\r\n * @property {boolean} liveValidation - Validates and emits `form-change` on value changes.\r\n * @property {boolean} showErrors - Shows validation errors in child controls when available.\r\n * @property {boolean} errorBox - Shows consolidated validation messages above the form.\r\n * @property {string} errorBoxMessage - Header message shown in the consolidated error box.\r\n * @property {SkyFormMode} mode - Submission mode (`client` or `server`).\r\n * @property {SkyFormMethod | undefined} method - Native form method in server mode.\r\n * @property {string | undefined} action - Native form action in server mode.\r\n * @property {string | undefined} target - Native form target in server mode.\r\n * @property {SkyFormEnctype | undefined} enctype - Native form encoding type.\r\n * @property {SkyFormAutocomplete | undefined} autocomplete - Native form autocomplete behavior.\r\n * @property {boolean} noValidate - Disables native HTML constraint UI.\r\n * @property {boolean} enterSubmit - Submits on Enter for non-textarea controls.\r\n * @property {boolean} resetOnSubmit - Resets form after successful submit.\r\n * @property {string | null} csrfToken - Optional CSRF token value for app-level submit handling.\r\n *\r\n * @fires {CustomEvent<SkyFormChangeDetail>} form-change - Fired when form values change in live validation mode.\r\n * @fires {CustomEvent<SkyFormValidationErrorsDetail>} validation-errors - Fired when aggregated validation errors change.\r\n * @fires {CustomEvent<SkyFormFormDataFallbackDetail> | FormDataEvent} formdata - Fired before client-mode submit with form data.\r\n * @fires {CustomEvent<SkyFormSubmitDetail>} form-submit - Fired after successful client-mode submit handling.\r\n *\r\n * @method checkValidity Returns native form validity without UI reporting.\r\n * @method reportValidity Returns native form validity and reports native UI messages.\r\n * @method requestSubmit Requests submission using optional submitter.\r\n * @method reset Resets native form and values.\r\n * @method resetForm Alias for `reset`.\r\n * @method submit Submits form using mode-specific client/server flow.\r\n *\r\n * @csspart error-box - Container for the consolidated error messages.\r\n * @csspart error-list - List element containing validation errors.\r\n *\r\n * @Behavior\r\n * - Provides seamless integration of custom form controls with native HTML form behavior\r\n * - Supports both client-side AJAX submissions and traditional server-side submissions\r\n * - Automatic validation aggregation from both native and custom form controls\r\n * - Light DOM rendering for proper browser form association\r\n *\r\n * The component automatically associates form controls (including custom elements) with the native form\r\n * using the `form` attribute, ensuring proper browser validation and FormData collection.\r\n *\r\n * - **Live Validation**: Validates on every input change (when liveValidation=true)\r\n * - **Submit Validation**: Validates only on form submission\r\n * - **Mixed Validation**: Combines both native HTML5 validation and custom component validation\r\n *\r\n * - **Client Mode**: Prevents page refresh, emits formdata/form-submit events for JavaScript handling\r\n * - **Server Mode**: Allows traditional form submission with page navigation/refresh\r\n *\r\n * @example\r\n * ```html\r\n * <sky-form id=\"login-form\" live-validation error-box>\r\n *   <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\r\n *   <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\r\n *   <sky-button type=\"submit\">Sign In</sky-button>\r\n * </sky-form>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-form id=\"login-form\" live-validation error-box @form-submit=\"onSubmit\">\r\n *     <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\r\n *     <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\r\n *     <sky-button type=\"submit\">Sign In</sky-button>\r\n *   </sky-form>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-form id=\"login-form\" live-validation error-box>\r\n *       <sky-input name=\"email\" type=\"email\" required label=\"Email\"></sky-input>\r\n *       <sky-input name=\"password\" type=\"password\" required label=\"Password\"></sky-input>\r\n *       <sky-button type=\"submit\">Sign In</sky-button>\r\n *     </sky-form>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-form\")\r\nexport class SkyForm extends LitElement {\r\n\r\n  /**\r\n   * When true, validates form on every value change.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  liveValidation = false;\r\n\r\n  /**\r\n   * Controls whether validation errors are displayed.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  showErrors = true;\r\n\r\n  /**\r\n   * When true, displays a consolidated error box with all validation errors.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  errorBox = false;\r\n\r\n  /**\r\n   * Custom message displayed in the error box header.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  errorBoxMessage = \"Fix These Issues Before Submitting\";\r\n\r\n  /**\r\n   * Submission mode: 'client' prevents page refresh, 'server' allows native form submission.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  mode: SkyFormMode = \"client\";\r\n\r\n  /**\r\n   * HTTP method for form submission (when mode='server').\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  method?: SkyFormMethod;\r\n\r\n  /**\r\n   * URL for form submission (when mode='server').\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  action?: string;\r\n\r\n  /**\r\n   * Target window/frame for form submission.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  target?: string;\r\n\r\n  /**\r\n   * Form encoding type.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  enctype?: SkyFormEnctype;\r\n\r\n  /**\r\n   * HTML autocomplete attribute.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  autocomplete?: SkyFormAutocomplete;\r\n\r\n  /**\r\n   * When true, disables native HTML5 validation.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  noValidate = false;\r\n\r\n  /**\r\n   * When true, pressing Enter in any input submits the form (except textarea).\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  enterSubmit = false;\r\n\r\n  /**\r\n   * When true, resets the form after successful submission.\r\n   * @public\r\n   */\r\n  @property({ type: Boolean })\r\n  resetOnSubmit = false;\r\n\r\n  /**\r\n   * CSRF token for form submission protection.\r\n   * @public\r\n   */\r\n  @property({ type: String })\r\n  csrfToken: string | null = null;\r\n\r\n  /**\r\n * Array of current validation error messages.\r\n * @private\r\n */\r\n  @state()\r\n  private validationErrors: string[] = [];\r\n\r\n  /**\r\n   * Indicates whether the last form submission was successful.\r\n   * @private\r\n   */\r\n  @state()\r\n  private submitSuccess = false;\r\n\r\n  /**\r\n * Indicates whether validation is currently active (errors shown).\r\n * @private\r\n */\r\n  @state()\r\n  private validationActive = false;\r\n\r\n\r\n\r\n  /** Reference to the native form element. */\r\n  @query(\"form\")\r\n  private _formEl!: HTMLFormElement;\r\n\r\n  private _mo?: MutationObserver;\r\n  private _syncQueued = false;\r\n  private _handlingSubmit = false;\r\n  private _handlingInvalid = false;\r\n\r\n  /** MUST be light DOM for button[form=\"...\"] + native id lookup */\r\n  protected override createRenderRoot(): this {\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * Returns the native HTML form element.\r\n   * @public\r\n   */\r\n  public get formElement(): HTMLFormElement {\r\n    return this._formEl;\r\n  }\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this._queueSync();\r\n\r\n    // ✅ capture submit before it reaches the <form> target\r\n    this.addEventListener(\"submit\", this._onHostSubmitCapture as any, true);\r\n    this.addEventListener(\"formdata\", this._onFormDataCapture as any, true);\r\n    this.addEventListener(\"value-changed\", this._handleValueChanged as any);\r\n    this.addEventListener(\"keydown\", this._onEnterKey as any, true);\r\n    this.addEventListener(\"invalid\", this._onInvalidCapture as any, true);\r\n    this._mo = new MutationObserver(() => this._queueSync());\r\n    this._mo.observe(this, { childList: true, subtree: true });\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    this.removeEventListener(\"submit\", this._onHostSubmitCapture as any, true);\r\n    this.removeEventListener(\"formdata\", this._onFormDataCapture as any, true);\r\n    this.removeEventListener(\"value-changed\", this._handleValueChanged as any);\r\n    this.removeEventListener(\"keydown\", this._onEnterKey as any, true);\r\n    this.removeEventListener(\"invalid\", this._onInvalidCapture as any, true);\r\n    this._mo?.disconnect();\r\n    super.disconnectedCallback();\r\n  }\r\n\r\n  private _queueSync(): void {\r\n    if (this._syncQueued) return;\r\n    this._syncQueued = true;\r\n\r\n    queueMicrotask(() => {\r\n      this._syncQueued = false;\r\n      this._moveHostIdToNativeForm();\r\n      this._ensureNativeFormHasId();\r\n      this._assignFormOwnerToChildren();\r\n      this._refreshAggregates();\r\n    });\r\n  }\r\n\r\n  private _onEnterKey = (e: KeyboardEvent) => {\r\n    if (!this.enterSubmit) return;\r\n    if (e.key !== \"Enter\") return;\r\n\r\n    const target = e.target as HTMLElement;\r\n\r\n    // ⛔ allow Enter inside textarea\r\n    if (target instanceof HTMLTextAreaElement) return;\r\n\r\n    // ⛔ ignore if a submit button already handles it\r\n    if (target.closest('button[type=\"submit\"], input[type=\"submit\"]')) {\r\n      return;\r\n    }\r\n\r\n    e.preventDefault();\r\n    this.requestSubmit();\r\n  };\r\n\r\n  /**\r\n   * Make `document.getElementById(hostId)` return the native form.\r\n   * Copies host id => native form id and removes id from host to avoid duplicate ids.\r\n   */\r\n  private _moveHostIdToNativeForm() {\r\n    const hostId = this.id?.trim();\r\n    if (!hostId || !this._formEl) return;\r\n\r\n    // set native form id\r\n    if (this._formEl.id !== hostId) this._formEl.id = hostId;\r\n\r\n    // remove host id so DOM lookups hit <form>\r\n    if (this.id === hostId) this.removeAttribute(\"id\");\r\n  }\r\n\r\n  /**\r\n   * Slotted controls remain in the light DOM under `<sky-form>`, not under the inner `<form>`.\r\n   * `_assignFormOwnerToChildren` needs a stable `id` on that `<form>` to set `form=\"…\"` on\r\n   * associated controls. When the host has no `id`, generate one so association still works.\r\n   */\r\n  private _ensureNativeFormHasId(): void {\r\n    if (!this._formEl?.id) {\r\n      const suffix =\r\n        typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\"\r\n          ? crypto.randomUUID()\r\n          : `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;\r\n      this._formEl.id = `sky-form-${suffix}`;\r\n    }\r\n  }\r\n\r\n  private _handleValueChanged = (e: Event) => {\r\n    if (!this.liveValidation) return;\r\n\r\n    // Only process if it's coming from our form elements\r\n    const target = e.target as HTMLElement;\r\n    if (\r\n      !target.matches(\r\n        \"sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch, input, select, textarea\",\r\n      )\r\n    ) {\r\n      return;\r\n    }\r\n\r\n    // Queue a sync to update validation errors\r\n    this._queueSync();\r\n\r\n    // Emit form-change event with current form data\r\n    this._emitFormChange();\r\n  };\r\n\r\n  /**\r\n   * Whether the form passes constraint validation, without calling `form.checkValidity()`.\r\n   * `HTMLFormElement.checkValidity()` dispatches `invalid` on each invalid control; during\r\n   * liveValidation that runs on every keystroke and our capture listener would focus the first\r\n   * invalid field, stealing focus from the control the user is editing.\r\n   */\r\n  private _formValidQuiet(): boolean {\r\n    const form = this._formEl;\r\n    if (!form) return true;\r\n\r\n    for (const el of Array.from(form.elements)) {\r\n      const h = el as HTMLElement & {\r\n        willValidate?: boolean;\r\n        validity?: ValidityState;\r\n      };\r\n      if (!(\"validity\" in h) || !h.validity) continue;\r\n      if (\"willValidate\" in h && h.willValidate === false) continue;\r\n      if (!h.validity.valid) return false;\r\n    }\r\n    return true;\r\n  }\r\n\r\n  private _emitFormChange(): void {\r\n    if (!this._formEl) return;\r\n\r\n    const fd = new FormData(this._formEl);\r\n    const json = this._formDataToJSON(fd);\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyFormChangeDetail>(\"form-change\", {\r\n        detail: {\r\n          values: json,\r\n          formData: fd,\r\n          success: this._formValidQuiet(),\r\n        },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Assigns form ownership to elements not inside the native <form> element.\r\n   * Ensures browser association for native submit + validation + FormData.\r\n   */\r\n  private _assignFormOwnerToChildren() {\r\n    const formId = this._formEl?.id;\r\n    if (!formId) return;\r\n\r\n    const candidates = Array.from(\r\n      this.querySelectorAll<HTMLElement>(\r\n        [\r\n          \"input\",\r\n          \"select\",\r\n          \"textarea\",\r\n          \"button\",\r\n          \"sky-button\",\r\n          \"sky-input\",\r\n          \"sky-combobox\",\r\n          \"sky-datepicker\",\r\n          \"sky-checkbox\",\r\n          \"sky-radio-group\",\r\n          \"sky-otp\",\r\n          \"sky-serial\",\r\n          \"sky-counter\",\r\n          \"sky-switch\",\r\n        ].join(\",\"),\r\n      ),\r\n    );\r\n\r\n    for (const el of candidates) {\r\n      // already inside the real form = skip\r\n      if (el.closest(\"form\") === this._formEl) continue;\r\n\r\n      // assign ownership\r\n      if ((el as { form?: HTMLFormElement }).form?.id !== formId) el.setAttribute(\"form\", formId);\r\n    }\r\n  }\r\n\r\n  private _getSkyInputs() {\r\n    return Array.from(\r\n      this.querySelectorAll<any>(\r\n        \"sky-input, sky-combobox, sky-datepicker, sky-checkbox, sky-radio-group, sky-otp, sky-serial, sky-counter, sky-switch\",\r\n      ),\r\n    );\r\n  }\r\n\r\n  private _emitValidationErrors(): void {\r\n    this.dispatchEvent(\r\n      new CustomEvent<SkyFormValidationErrorsDetail>(\"validation-errors\", {\r\n        detail: { errors: [...this.validationErrors] },\r\n        bubbles: true,\r\n        composed: true,\r\n      }),\r\n    );\r\n  }\r\n\r\n  private _onFormDataCapture = (e: Event) => {\r\n    // Only intercept native form's event\r\n    if (!(e.target instanceof HTMLFormElement)) return;\r\n    if (e.target !== this._formEl) return;\r\n\r\n    // ⛔ Stop native bubbling so Vue doesn't see it\r\n    e.stopImmediatePropagation();\r\n    // DO NOT preventDefault – formdata is informational\r\n  };\r\n\r\n  private _onInvalidCapture = (e: Event) => {\r\n    const t = e.target as any;\r\n\r\n    // only react to invalids belonging to THIS form\r\n    if (t?.form && t.form !== this._formEl) return;\r\n\r\n    e.preventDefault();\r\n    e.stopImmediatePropagation();\r\n\r\n    // ✅ this is the ONLY thing invalid should do\r\n    this._activateValidation();\r\n\r\n    this._focusFirstInvalid();\r\n  };\r\n\r\n  private _refreshAggregates() {\r\n    const errs: string[] = [];\r\n\r\n    // 1) sky-* component errors (if they provide them)\r\n    const skyInputs = this._getSkyInputs();\r\n    for (const input of skyInputs) {\r\n      // ✅ Only run validateInput when NOT inside invalid recursion\r\n      if (!this._handlingInvalid && typeof input.validateInput === \"function\") {\r\n        input.validateInput();\r\n      }\r\n\r\n      if (Array.isArray(input.validationErrors)) {\r\n        errs.push(...input.validationErrors);\r\n      }\r\n    }\r\n\r\n    // 2) native constraint validation messages from associated elements\r\n    const elements = Array.from(this._formEl.elements) as any[];\r\n    for (const el of elements) {\r\n      // Skip buttons etc\r\n      if (!(\"willValidate\" in el) || !el.willValidate) continue;\r\n\r\n      const isValid =\r\n        \"validity\" in el && el.validity ? el.validity.valid : true;\r\n\r\n      if (!isValid) {\r\n        const msg =\r\n          el.validationMessage || `${el.name || el.id || \"Field\"} is invalid`;\r\n        errs.push(msg);\r\n      }\r\n    }\r\n\r\n    const next = [...new Set(errs)];\r\n    if (next.join(\"|\") !== this.validationErrors.join(\"|\")) {\r\n      this.validationErrors = next;\r\n      this._emitValidationErrors();\r\n    }\r\n  }\r\n\r\n  private _focusFirstInvalid() {\r\n    const inputs = this._getSkyInputs();\r\n    const firstInvalid = inputs.find(input => input.invalid === true);\r\n\r\n    if (firstInvalid) {\r\n      this._focusElement(firstInvalid);\r\n    }\r\n  }\r\n\r\n  private _focusElement(element: HTMLElement) {\r\n    const prefersReducedMotion =\r\n      typeof matchMedia === \"function\" &&\r\n      matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n    element.scrollIntoView({\r\n      behavior: prefersReducedMotion ? \"auto\" : \"smooth\",\r\n      block: \"center\",\r\n    });\r\n    setTimeout(() => {\r\n      element.focus({ preventScroll: true });\r\n    }, 100);\r\n  }\r\n\r\n  private _syncNow() {\r\n    this._moveHostIdToNativeForm();\r\n    this._ensureNativeFormHasId();\r\n    this._assignFormOwnerToChildren();\r\n    this._refreshAggregates();\r\n  }\r\n\r\n  private _onHostSubmitCapture = (e: Event) => {\r\n    // only intercept submits coming from the inner native form\r\n    if (!(e.target instanceof HTMLFormElement)) return;\r\n    if (e.target !== this._formEl) return;\r\n\r\n    // avoid recursion when we re-dispatch\r\n    if (this._handlingSubmit) return;\r\n    this._handlingSubmit = true;\r\n\r\n    try {\r\n      this._syncNow();\r\n      // ✅ native validation first (like <form>)\r\n      const ok = this._formEl.checkValidity();\r\n      if (!ok) {\r\n        e.preventDefault();\r\n        e.stopImmediatePropagation();\r\n        this.submitSuccess = false;\r\n        this._focusFirstInvalid();\r\n        return;\r\n      }\r\n\r\n      // ✅ If mode is 'server', allow native form submission (page refresh/navigation)\r\n      if (this.mode === \"server\") {\r\n        // Just let the native form submit proceed normally\r\n        this.submitSuccess = true;\r\n        if (this.resetOnSubmit) {\r\n          queueMicrotask(() => this.reset());\r\n        }\r\n        return;\r\n      }\r\n\r\n      // Always prevent default for client mode to avoid page refresh\r\n      e.preventDefault();\r\n      e.stopImmediatePropagation();\r\n\r\n      const fd = new FormData(this._formEl);\r\n\r\n      // ✅ Emit a REAL FormDataEvent if available (so Vue handler can use e.formData)\r\n      let dispatched = false;\r\n      try {\r\n        // @ts-ignore\r\n        const fde = new FormDataEvent(\"formdata\", {\r\n          formData: fd,\r\n          bubbles: true,\r\n          composed: true,\r\n        });\r\n        this.dispatchEvent(fde);\r\n        dispatched = true;\r\n      } catch { }\r\n\r\n      // fallback for older browsers\r\n      if (!dispatched) {\r\n        this.dispatchEvent(\r\n          new CustomEvent<SkyFormFormDataFallbackDetail>(\"formdata\", {\r\n            detail: { formData: fd },\r\n            bubbles: true,\r\n            composed: true,\r\n          }),\r\n        );\r\n      }\r\n\r\n      // optional perk event (JSON)\r\n      const json = this._formDataToJSON(fd);\r\n      this.dispatchEvent(\r\n        new CustomEvent<SkyFormSubmitDetail>(\"form-submit\", {\r\n          detail: {\r\n            values: json,\r\n            formData: fd,\r\n            success: this._formEl.checkValidity(),\r\n          },\r\n          bubbles: true,\r\n          composed: true,\r\n        }),\r\n      );\r\n\r\n      this.submitSuccess = true;\r\n      if (this.resetOnSubmit) {\r\n        queueMicrotask(() => this.reset());\r\n      }\r\n    } finally {\r\n      this._handlingSubmit = false;\r\n    }\r\n  };\r\n\r\n  private _formDataToJSON(fd: FormData): SkyFormValues {\r\n    const obj: SkyFormValues = {};\r\n\r\n    fd.forEach((value, key) => {\r\n      if (key in obj) {\r\n        // convert to array if duplicate keys\r\n        if (Array.isArray(obj[key])) {\r\n          obj[key].push(value);\r\n        } else {\r\n          obj[key] = [obj[key], value];\r\n        }\r\n      } else {\r\n        obj[key] = value;\r\n      }\r\n    });\r\n\r\n    return obj;\r\n  }\r\n\r\n  /** Activates validation mode and refreshes error aggregates. */\r\n  private _activateValidation(): void {\r\n    this.validationActive = true;\r\n\r\n    const skyInputs = this._getSkyInputs();\r\n    for (const input of skyInputs) {\r\n      input.validationActive = true;\r\n      input.showErrors = true;\r\n    }\r\n\r\n    // 🔥 IMPORTANT: defer aggregation\r\n    queueMicrotask(() => this._refreshAggregates());\r\n  }\r\n\r\n  /**\r\n   * Checks form validity without displaying validation messages.\r\n   * @returns {boolean} True if the form is valid, false otherwise.\r\n   * @public\r\n   */\r\n  public checkValidity(): boolean {\r\n    // Sync synchronously: child controls must have their `form` association set\r\n    // before form.checkValidity() runs, otherwise they are excluded from\r\n    // form.elements and validity would be reported incorrectly.\r\n    this._syncNow();\r\n    return this._formEl?.checkValidity?.() ?? true;\r\n  }\r\n\r\n  /**\r\n   * Checks form validity and displays validation messages.\r\n   * @returns {boolean} True if the form is valid, false otherwise.\r\n   * @public\r\n   */\r\n  public reportValidity(): boolean {\r\n    this._syncNow();\r\n    return this._formEl?.reportValidity?.() ?? true;\r\n  }\r\n\r\n  /**\r\n   * Requests form submission (compatible with native requestSubmit).\r\n   * @param {HTMLElement} submitter - Optional submitter element.\r\n   * @public\r\n   */\r\n  public requestSubmit(submitter?: HTMLElement): void {\r\n    this._syncNow();\r\n    this._activateValidation();\r\n    // @ts-ignore\r\n    this._formEl?.requestSubmit?.(submitter);\r\n  }\r\n\r\n  /**\r\n   * Resets the form to its initial state.\r\n   * @public\r\n   */\r\n  public reset(): void {\r\n    this._queueSync();\r\n    this._formEl?.reset();\r\n  }\r\n\r\n  /**\r\n   * Resets the form to its initial state (alias for reset()).\r\n   * @public\r\n   */\r\n  public resetForm(): void {\r\n    this._queueSync();\r\n    this._formEl?.reset();\r\n  }\r\n\r\n  /**\r\n   * Manually submits the form, respecting the current mode setting.\r\n   * In client mode, triggers the client-side submission flow.\r\n   * In server mode, performs native form submission.\r\n   * @public\r\n   */\r\n  public submit(): void {\r\n    this._activateValidation();\r\n    if (this.mode === \"client\") {\r\n      // Trigger the client-side submission flow\r\n      const submitEvent = new SubmitEvent(\"submit\", {\r\n        bubbles: true,\r\n        cancelable: true,\r\n      });\r\n      this._formEl?.dispatchEvent(submitEvent);\r\n    } else {\r\n      // In server mode, use native form submission\r\n      this._formEl?.submit();\r\n    }\r\n  }\r\n\r\n  override render() {\r\n    return html`\r\n      <style>\r\n        /* Scoped to the sky-form tag: this is a light-DOM component, so\r\n           unscoped class selectors would leak into the whole document. */\r\n        sky-form .error-wrapper {\r\n          width: 100%;\r\n          display: flex;\r\n          justify-content: center;\r\n        }\r\n        sky-form .error-container {\r\n          margin: var(--sky-space-3, 12px) 0;\r\n          padding: var(--sky-space-2, 8px) var(--sky-space-3, 12px);\r\n          width: 100%;\r\n          border-radius: var(--sky-radius-secondary);\r\n          border: 1px solid var(--sky-danger-primary);\r\n          background: var(--sky-glass-solid);\r\n          box-shadow: var(--sky-box-shadow-primary);\r\n          position: relative;\r\n          z-index: inherit;\r\n        }\r\n        sky-form .error-title {\r\n          font-size: var(--sky-font-size-sm, 14px);\r\n          color: var(--sky-danger-primary);\r\n          width: 100%;\r\n          display: flex;\r\n          justify-content: center;\r\n        }\r\n        sky-form .error-list {\r\n          list-style-position: inside;\r\n          padding: var(--sky-space-1, 4px);\r\n          margin: 0;\r\n          text-align: start;\r\n        }\r\n        sky-form .error-item {\r\n          font-size: var(--sky-font-size-xs, 12px);\r\n          color: var(--sky-text-primary);\r\n        }\r\n      </style>\r\n\r\n      <form\r\n        part=\"form\"\r\n        method=${ifDefined(this.method)}\r\n        action=${ifDefined(this.action)}\r\n        enctype=${ifDefined(this.enctype)}\r\n        autocomplete=${ifDefined(this.autocomplete)}\r\n        ?novalidate=${this.noValidate}\r\n        target=${ifDefined(this.target || undefined)}\r\n      >\r\n        ${this.csrfToken\r\n        ? html`<input\r\n              type=\"hidden\"\r\n              name=\"csrfmiddlewaretoken\"\r\n              .value=${this.csrfToken}\r\n            />`\r\n        : nothing}\r\n        <slot></slot>\r\n      </form>\r\n\r\n      ${this.errorBox &&\r\n        this.validationErrors.length > 0 &&\r\n        this.showErrors &&\r\n        this.validationActive\r\n        ? html`\r\n            <div class=\"error-wrapper\" part=\"error-box\">\r\n              <div class=\"error-container\">\r\n                <div class=\"error-title\">${this.errorBoxMessage}</div>\r\n                <ul class=\"error-list\" part=\"error-list\">\r\n                  ${this.validationErrors.map(\r\n          (err) => html`<li class=\"error-item\">${err}</li>`,\r\n        )}\r\n                </ul>\r\n              </div>\r\n            </div>\r\n          `\r\n        : nothing}\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyForm","LitElement","constructor","super","arguments","this","liveValidation","showErrors","errorBox","errorBoxMessage","mode","noValidate","enterSubmit","resetOnSubmit","csrfToken","validationErrors","submitSuccess","validationActive","_syncQueued","_handlingSubmit","_handlingInvalid","_onEnterKey","e","key","target","HTMLTextAreaElement","closest","preventDefault","requestSubmit","_handleValueChanged","matches","_queueSync","_emitFormChange","_onFormDataCapture","HTMLFormElement","_formEl","stopImmediatePropagation","_onInvalidCapture","t","form","_activateValidation","_focusFirstInvalid","_onHostSubmitCapture","_syncNow","checkValidity","queueMicrotask","reset","fd","FormData","dispatched","fde","FormDataEvent","formData","bubbles","composed","dispatchEvent","CustomEvent","detail","json","_formDataToJSON","values","success","createRenderRoot","formElement","connectedCallback","addEventListener","_mo","MutationObserver","observe","childList","subtree","disconnectedCallback","removeEventListener","disconnect","_moveHostIdToNativeForm","_ensureNativeFormHasId","_assignFormOwnerToChildren","_refreshAggregates","hostId","id","trim","removeAttribute","suffix","crypto","randomUUID","Date","now","Math","random","toString","slice","_formValidQuiet","el","Array","from","elements","h","validity","willValidate","valid","formId","candidates","querySelectorAll","join","setAttribute","_getSkyInputs","_emitValidationErrors","errors","errs","skyInputs","input","validateInput","isArray","push","msg","validationMessage","name","next","Set","firstInvalid","find","invalid","_focusElement","element","prefersReducedMotion","matchMedia","scrollIntoView","behavior","block","setTimeout","focus","preventScroll","obj","forEach","value","reportValidity","submitter","resetForm","submit","submitEvent","SubmitEvent","cancelable","render","html","ifDefined","method","action","enctype","autocomplete","nothing","length","map","err","__decorateClass","property","type","Boolean","prototype","String","state","query","customElement"],"mappings":"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"}