@sky.ui/core 0.0.58 → 0.0.59

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sky-image.js","sources":["../../src/sky-image/sky-image.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\r\nimport type { PropertyValues } from \"lit\";\r\nimport { customElement, property } from \"lit/decorators.js\";\r\nimport { styleMap } from \"lit/directives/style-map.js\";\r\nimport { resolveImageFallbackSrc } from \"./srcset-utils.js\";\r\nimport { PresetController } from \"../helper/controllers/preset-controller\";\r\n\r\nexport type SkyImageLoading = \"lazy\" | \"eager\";\r\nexport type SkyImageDecoding = \"async\" | \"sync\" | \"auto\";\r\n\r\n/**\r\n * @element sky-image\r\n *\r\n * @summary Responsive image component with style controls, `srcset`, and optional auto `sizes`.\r\n *\r\n * @status stable\r\n * @since 1.0.0\r\n *\r\n * @documentation https://sky-ui.com/components/image\r\n *\r\n * @slot - No slots are exposed; image content is rendered internally.\r\n * @property {string} src - Primary image source URL.\r\n * @property {string} alt - Alternative text for accessibility.\r\n * @property {string} width - CSS width for the rendered image.\r\n * @property {string} height - CSS height for the rendered image.\r\n * @property {string | null} aspectRatio - CSS `aspect-ratio` value.\r\n * @property {string} borderRadius - CSS border radius.\r\n * @property {string} boxShadow - CSS box shadow.\r\n * @property {string} objectFit - CSS object-fit value.\r\n * @property {string} objectPosition - CSS object-position value.\r\n * @property {string} srcset - Responsive source set string.\r\n * @property {string} sizes - Responsive sizes string.\r\n * @property {boolean} autoSizes - Computes `sizes` from host width when true.\r\n * @property {SkyImageLoading} loading - Native loading hint.\r\n * @property {SkyImageDecoding} decoding - Native decoding hint.\r\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\r\n *\r\n * @csspart img - The underlying `<img>` element.\r\n *\r\n * @Behavior\r\n * - Renders a fallback visual placeholder when `src` is empty\r\n * - Supports automatic `sizes` updates using ResizeObserver\r\n * - Forwards native image loading and decoding hints\r\n *\r\n * @example\r\n * ```html\r\n * <sky-image\r\n *   src=\"/images/photo-1280.jpg\"\r\n *   srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\r\n *   sizes=\"(max-width: 768px) 100vw, 50vw\"\r\n *   alt=\"Responsive photo\"\r\n *   width=\"100%\"\r\n *   aspect-ratio=\"4/3\"\r\n *   border-radius=\"8px\"\r\n *   loading=\"lazy\"\r\n * ></sky-image>\r\n * ```\r\n * ```vue\r\n * <template>\r\n *   <sky-image\r\n *     src=\"/images/photo-1280.jpg\"\r\n *     srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\r\n *     sizes=\"(max-width: 768px) 100vw, 50vw\"\r\n *     alt=\"Responsive photo\"\r\n *     width=\"100%\"\r\n *     aspect-ratio=\"4/3\"\r\n *     border-radius=\"8px\"\r\n *   ></sky-image>\r\n * </template>\r\n * ```\r\n * ```jsx\r\n * export default function Demo() {\r\n *   return (\r\n *     <sky-image\r\n *       src=\"/images/photo-1280.jpg\"\r\n *       srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\r\n *       sizes=\"(max-width: 768px) 100vw, 50vw\"\r\n *       alt=\"Responsive photo\"\r\n *       width=\"100%\"\r\n *       aspect-ratio=\"4/3\"\r\n *       border-radius=\"8px\"\r\n *     ></sky-image>\r\n *   );\r\n * }\r\n * ```\r\n */\r\n@customElement(\"sky-image\")\r\nexport class SkyImage extends LitElement {\r\n  @property({ type: String }) src = \"\";\r\n  @property({ type: String }) alt = \"Image\";\r\n  @property({ type: String }) width = \"auto\";\r\n  @property({ type: String }) height = \"auto\";\r\n  @property({ type: String }) aspectRatio: string | null = null;\r\n  @property({ type: String }) borderRadius = \"0\";\r\n  @property({ type: String }) boxShadow = \"none\";\r\n  @property({ type: String }) objectFit = \"cover\";\r\n  @property({ type: String }) objectPosition = \"center\";\r\n\r\n  @property({ type: String }) srcset = \"\";\r\n  @property({ type: String }) sizes = \"\";\r\n\r\n  @property({ type: Boolean }) autoSizes = false;\r\n  private _computedSizes = \"\";\r\n\r\n  @property({ type: String }) loading: SkyImageLoading = \"lazy\";\r\n  @property({ type: String }) decoding: SkyImageDecoding = \"async\";\r\n\r\n\r\n  /** Named prop preset from nearest `sky-config-provider`. */\r\n  @property({ type: String, reflect: true }) preset = \"\";\r\n\r\n  private _presets = new PresetController(this);\r\n\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-block;\r\n      max-width: 100%;\r\n    }\r\n\r\n    img,\r\n    .placeholder {\r\n      display: block;\r\n      max-width: 100%;\r\n    }\r\n\r\n    .placeholder {\r\n      background: var(--sky-hover-tertiary);\r\n    }\r\n  `;\r\n\r\n  private _ro?: ResizeObserver;\r\n  private _sizesRafId: number | null = null;\r\n  private _updateSizes = () => {\r\n    if (this._sizesRafId != null) return;\r\n    this._sizesRafId = requestAnimationFrame(() => {\r\n      this._sizesRafId = null;\r\n      const w = Math.ceil(this.getBoundingClientRect().width);\r\n      if (w > 0) {\r\n        const next = `${w}px`;\r\n        if (this._computedSizes === next) return;\r\n        this._computedSizes = next;\r\n        const img = this.renderRoot.querySelector(\"img\");\r\n        if (img instanceof HTMLImageElement) img.sizes = next;\r\n      }\r\n    });\r\n  };\r\n\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // firstUpdated runs only once; re-create the observer when the element\r\n    // is moved back into the document after a disconnect.\r\n    this._ensureAutoSizesObserver();\r\n  }\r\n\r\n  override firstUpdated(): void {\r\n    this._ensureAutoSizesObserver();\r\n  }\r\n\r\n  private _ensureAutoSizesObserver(): void {\r\n    if (!this.autoSizes) return;\r\n    if (!this._ro) {\r\n      this._ro = new ResizeObserver(this._updateSizes);\r\n      this._ro.observe(this);\r\n    }\r\n    this._updateSizes();\r\n  }\r\n\r\n  override updated(changed: PropertyValues<this>): void {\r\n    super.updated(changed);\r\n\r\n    if (changed.has(\"autoSizes\")) {\r\n      if (this.autoSizes) {\r\n        this._ensureAutoSizesObserver();\r\n      } else {\r\n        this._ro?.disconnect();\r\n        this._ro = undefined;\r\n        this._computedSizes = \"\";\r\n        const img = this.renderRoot.querySelector(\"img\");\r\n        if (img instanceof HTMLImageElement) {\r\n          if (this.sizes) img.sizes = this.sizes;\r\n          else img.removeAttribute(\"sizes\");\r\n        }\r\n      }\r\n    }\r\n\r\n    if (!this._shouldResyncImageSource(changed)) return;\r\n    this._resyncImageSource(\r\n      changed.has(\"srcset\") && changed.get(\"srcset\") !== undefined,\r\n    );\r\n  }\r\n\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this._ro?.disconnect();\r\n    this._ro = undefined;\r\n    if (this._sizesRafId != null) {\r\n      cancelAnimationFrame(this._sizesRafId);\r\n      this._sizesRafId = null;\r\n    }\r\n  }\r\n\r\n  /** Browsers keep the resolved resource when only srcset/sizes attrs change on a live <img>. */\r\n  private _shouldResyncImageSource(changed: PropertyValues<this>): boolean {\r\n    if (!this.src?.trim() && !this.srcset?.trim()) return false;\r\n    if (changed.has(\"src\") && changed.get(\"src\") !== undefined) return true;\r\n    if (changed.has(\"srcset\") && changed.get(\"srcset\") !== undefined) return true;\r\n    if (changed.has(\"sizes\") && changed.get(\"sizes\") !== undefined) return true;\r\n    return false;\r\n  }\r\n\r\n  private _resolvedSizesAttr(): string {\r\n    return this.autoSizes ? this._computedSizes : this.sizes || \"\";\r\n  }\r\n\r\n  /** `src` used on <img> — must stay in sync with `srcset` when the set changes. */\r\n  private _displaySrc(): string {\r\n    const explicit = this.src?.trim() ?? \"\";\r\n    const srcset = this.srcset?.trim() ?? \"\";\r\n    if (!explicit && !srcset) return \"\";\r\n    if (!srcset) return explicit;\r\n    return resolveImageFallbackSrc(explicit, srcset);\r\n  }\r\n\r\n  private _applyImgAttrs(img: HTMLImageElement, srcsetChanged: boolean): void {\r\n    const srcset = this.srcset?.trim() ?? \"\";\r\n    const sizesAttr = this._resolvedSizesAttr();\r\n    const src = this._displaySrc();\r\n\r\n    if (srcset) img.srcset = srcset;\r\n    else img.removeAttribute(\"srcset\");\r\n\r\n    if (sizesAttr) img.sizes = sizesAttr;\r\n    else img.removeAttribute(\"sizes\");\r\n\r\n    // When the candidate list changes, drop `src` first so the UA cannot keep the old resource.\r\n    if (srcsetChanged) img.removeAttribute(\"src\");\r\n    img.src = src;\r\n  }\r\n\r\n  private _resyncImageSource(srcsetChanged = false): void {\r\n    const img = this.renderRoot.querySelector(\"img\");\r\n    if (!(img instanceof HTMLImageElement)) return;\r\n\r\n    const replacement = img.cloneNode(false) as HTMLImageElement;\r\n    replacement.alt = this.alt;\r\n    replacement.loading = this.loading;\r\n    replacement.decoding = this.decoding;\r\n    const style = img.getAttribute(\"style\");\r\n    if (style) replacement.setAttribute(\"style\", style);\r\n    replacement.setAttribute(\"part\", \"img\");\r\n\r\n    this._applyImgAttrs(replacement, srcsetChanged);\r\n    img.replaceWith(replacement);\r\n  }\r\n\r\n  override render() {\r\n    const sizesAttr = this._resolvedSizesAttr();\r\n    const displaySrc = this._displaySrc();\r\n    const hasSrc = displaySrc !== \"\";\r\n\r\n    const styleVars = {\r\n      width: this.width,\r\n      height: this.height,\r\n      borderRadius: this.borderRadius,\r\n      boxShadow: this.boxShadow,\r\n      objectFit: this.objectFit,\r\n      objectPosition: this.objectPosition,\r\n      aspectRatio: this.aspectRatio ?? \"auto\",\r\n    };\r\n\r\n    if (!hasSrc) {\r\n      return html`\r\n        <div\r\n          class=\"placeholder\"\r\n          part=\"img\"\r\n          style=${styleMap(styleVars)}\r\n          aria-label=${this.alt}\r\n          role=\"img\"\r\n        ></div>\r\n      `;\r\n    }\r\n\r\n    return html`\r\n      <img\r\n        src=${displaySrc}\r\n        alt=${this.alt}\r\n        srcset=${this.srcset || nothing}\r\n        sizes=${sizesAttr || nothing}\r\n        loading=${this.loading}\r\n        decoding=${this.decoding}\r\n        style=${styleMap(styleVars)}\r\n        part=\"img\"\r\n      />\r\n    `;\r\n  }\r\n}\r\n"],"names":["SkyImage","LitElement","constructor","super","arguments","this","src","alt","width","height","aspectRatio","borderRadius","boxShadow","objectFit","objectPosition","srcset","sizes","autoSizes","_computedSizes","loading","decoding","preset","_presets","PresetController","_sizesRafId","_updateSizes","requestAnimationFrame","w","Math","ceil","getBoundingClientRect","next","img","renderRoot","querySelector","HTMLImageElement","connectedCallback","_ensureAutoSizesObserver","firstUpdated","_ro","ResizeObserver","observe","updated","changed","has","disconnect","removeAttribute","_shouldResyncImageSource","_resyncImageSource","get","disconnectedCallback","cancelAnimationFrame","trim","_resolvedSizesAttr","_displaySrc","explicit","resolveImageFallbackSrc","_applyImgAttrs","srcsetChanged","sizesAttr","replacement","cloneNode","style","getAttribute","setAttribute","replaceWith","render","displaySrc","hasSrc","styleVars","html","nothing","styleMap","styles","css","__decorateClass","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}
+{"version":3,"file":"sky-image.js","sources":["../../src/sky-image/sky-image.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport type { PropertyValues } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { resolveImageFallbackSrc } from \"./srcset-utils.js\";\nimport { PresetController } from \"../helper/controllers/preset-controller\";\n\nexport type SkyImageLoading = \"lazy\" | \"eager\";\nexport type SkyImageDecoding = \"async\" | \"sync\" | \"auto\";\n\n/**\n * @element sky-image\n *\n * @summary Responsive image component with style controls, `srcset`, and optional auto `sizes`.\n *\n * @status stable\n * @since 1.0.0\n *\n * @documentation https://sky-ui.com/components/image\n *\n * @slot - No slots are exposed; image content is rendered internally.\n * @property {string} src - Primary image source URL.\n * @property {string} alt - Alternative text for accessibility.\n * @property {string} width - CSS width for the rendered image.\n * @property {string} height - CSS height for the rendered image.\n * @property {string | null} aspectRatio - CSS `aspect-ratio` value.\n * @property {string} borderRadius - CSS border radius.\n * @property {string} boxShadow - CSS box shadow.\n * @property {string} objectFit - CSS object-fit value.\n * @property {string} objectPosition - CSS object-position value.\n * @property {string} srcset - Responsive source set string.\n * @property {string} sizes - Responsive sizes string.\n * @property {boolean} autoSizes - Computes `sizes` from host width when true.\n * @property {SkyImageLoading} loading - Native loading hint.\n * @property {SkyImageDecoding} decoding - Native decoding hint.\n * @property {string} preset - Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.\n *\n * @csspart img - The underlying `<img>` element.\n *\n * @Behavior\n * - Renders a fallback visual placeholder when `src` is empty\n * - Supports automatic `sizes` updates using ResizeObserver\n * - Forwards native image loading and decoding hints\n *\n * @example\n * ```html\n * <sky-image\n *   src=\"/images/photo-1280.jpg\"\n *   srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\n *   sizes=\"(max-width: 768px) 100vw, 50vw\"\n *   alt=\"Responsive photo\"\n *   width=\"100%\"\n *   aspect-ratio=\"4/3\"\n *   border-radius=\"8px\"\n *   loading=\"lazy\"\n * ></sky-image>\n * ```\n * ```vue\n * <template>\n *   <sky-image\n *     src=\"/images/photo-1280.jpg\"\n *     srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\n *     sizes=\"(max-width: 768px) 100vw, 50vw\"\n *     alt=\"Responsive photo\"\n *     width=\"100%\"\n *     aspect-ratio=\"4/3\"\n *     border-radius=\"8px\"\n *   ></sky-image>\n * </template>\n * ```\n * ```jsx\n * export default function Demo() {\n *   return (\n *     <sky-image\n *       src=\"/images/photo-1280.jpg\"\n *       srcset=\"/images/photo-640.jpg 640w, /images/photo-960.jpg 960w, /images/photo-1280.jpg 1280w\"\n *       sizes=\"(max-width: 768px) 100vw, 50vw\"\n *       alt=\"Responsive photo\"\n *       width=\"100%\"\n *       aspect-ratio=\"4/3\"\n *       border-radius=\"8px\"\n *     ></sky-image>\n *   );\n * }\n * ```\n */\n@customElement(\"sky-image\")\nexport class SkyImage extends LitElement {\n  @property({ type: String }) src = \"\";\n  @property({ type: String }) alt = \"Image\";\n  @property({ type: String }) width = \"auto\";\n  @property({ type: String }) height = \"auto\";\n  @property({ type: String }) aspectRatio: string | null = null;\n  @property({ type: String }) borderRadius = \"0\";\n  @property({ type: String }) boxShadow = \"none\";\n  @property({ type: String }) objectFit = \"cover\";\n  @property({ type: String }) objectPosition = \"center\";\n\n  @property({ type: String }) srcset = \"\";\n  @property({ type: String }) sizes = \"\";\n\n  @property({ type: Boolean }) autoSizes = false;\n  private _computedSizes = \"\";\n\n  @property({ type: String }) loading: SkyImageLoading = \"lazy\";\n  @property({ type: String }) decoding: SkyImageDecoding = \"async\";\n\n\n  /** Named prop preset from nearest `sky-config-provider`. */\n  @property({ type: String, reflect: true }) preset = \"\";\n\n  private _presets = new PresetController(this);\n\n  static override styles = css`\n    :host {\n      display: inline-block;\n      max-width: 100%;\n    }\n\n    img,\n    .placeholder {\n      display: block;\n      max-width: 100%;\n    }\n\n    .placeholder {\n      background: var(--sky-hover-tertiary);\n    }\n  `;\n\n  private _ro?: ResizeObserver;\n  private _sizesRafId: number | null = null;\n  private _updateSizes = () => {\n    if (this._sizesRafId != null) return;\n    this._sizesRafId = requestAnimationFrame(() => {\n      this._sizesRafId = null;\n      const w = Math.ceil(this.getBoundingClientRect().width);\n      if (w > 0) {\n        const next = `${w}px`;\n        if (this._computedSizes === next) return;\n        this._computedSizes = next;\n        const img = this.renderRoot.querySelector(\"img\");\n        if (img instanceof HTMLImageElement) img.sizes = next;\n      }\n    });\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // firstUpdated runs only once; re-create the observer when the element\n    // is moved back into the document after a disconnect.\n    this._ensureAutoSizesObserver();\n  }\n\n  override firstUpdated(): void {\n    this._ensureAutoSizesObserver();\n  }\n\n  private _ensureAutoSizesObserver(): void {\n    if (!this.autoSizes) return;\n    if (!this._ro) {\n      this._ro = new ResizeObserver(this._updateSizes);\n      this._ro.observe(this);\n    }\n    this._updateSizes();\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n\n    if (changed.has(\"autoSizes\")) {\n      if (this.autoSizes) {\n        this._ensureAutoSizesObserver();\n      } else {\n        this._ro?.disconnect();\n        this._ro = undefined;\n        this._computedSizes = \"\";\n        const img = this.renderRoot.querySelector(\"img\");\n        if (img instanceof HTMLImageElement) {\n          if (this.sizes) img.sizes = this.sizes;\n          else img.removeAttribute(\"sizes\");\n        }\n      }\n    }\n\n    if (!this._shouldResyncImageSource(changed)) return;\n    this._resyncImageSource(\n      changed.has(\"srcset\") && changed.get(\"srcset\") !== undefined,\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = undefined;\n    if (this._sizesRafId != null) {\n      cancelAnimationFrame(this._sizesRafId);\n      this._sizesRafId = null;\n    }\n  }\n\n  /** Browsers keep the resolved resource when only srcset/sizes attrs change on a live <img>. */\n  private _shouldResyncImageSource(changed: PropertyValues<this>): boolean {\n    if (!this.src?.trim() && !this.srcset?.trim()) return false;\n    if (changed.has(\"src\") && changed.get(\"src\") !== undefined) return true;\n    if (changed.has(\"srcset\") && changed.get(\"srcset\") !== undefined) return true;\n    if (changed.has(\"sizes\") && changed.get(\"sizes\") !== undefined) return true;\n    return false;\n  }\n\n  private _resolvedSizesAttr(): string {\n    return this.autoSizes ? this._computedSizes : this.sizes || \"\";\n  }\n\n  /** `src` used on <img> — must stay in sync with `srcset` when the set changes. */\n  private _displaySrc(): string {\n    const explicit = this.src?.trim() ?? \"\";\n    const srcset = this.srcset?.trim() ?? \"\";\n    if (!explicit && !srcset) return \"\";\n    if (!srcset) return explicit;\n    return resolveImageFallbackSrc(explicit, srcset);\n  }\n\n  private _applyImgAttrs(img: HTMLImageElement, srcsetChanged: boolean): void {\n    const srcset = this.srcset?.trim() ?? \"\";\n    const sizesAttr = this._resolvedSizesAttr();\n    const src = this._displaySrc();\n\n    if (srcset) img.srcset = srcset;\n    else img.removeAttribute(\"srcset\");\n\n    if (sizesAttr) img.sizes = sizesAttr;\n    else img.removeAttribute(\"sizes\");\n\n    // When the candidate list changes, drop `src` first so the UA cannot keep the old resource.\n    if (srcsetChanged) img.removeAttribute(\"src\");\n    img.src = src;\n  }\n\n  private _resyncImageSource(srcsetChanged = false): void {\n    const img = this.renderRoot.querySelector(\"img\");\n    if (!(img instanceof HTMLImageElement)) return;\n\n    const replacement = img.cloneNode(false) as HTMLImageElement;\n    replacement.alt = this.alt;\n    replacement.loading = this.loading;\n    replacement.decoding = this.decoding;\n    const style = img.getAttribute(\"style\");\n    if (style) replacement.setAttribute(\"style\", style);\n    replacement.setAttribute(\"part\", \"img\");\n\n    this._applyImgAttrs(replacement, srcsetChanged);\n    img.replaceWith(replacement);\n  }\n\n  override render() {\n    const sizesAttr = this._resolvedSizesAttr();\n    const displaySrc = this._displaySrc();\n    const hasSrc = displaySrc !== \"\";\n\n    const styleVars = {\n      width: this.width,\n      height: this.height,\n      borderRadius: this.borderRadius,\n      boxShadow: this.boxShadow,\n      objectFit: this.objectFit,\n      objectPosition: this.objectPosition,\n      aspectRatio: this.aspectRatio ?? \"auto\",\n    };\n\n    if (!hasSrc) {\n      return html`\n        <div\n          class=\"placeholder\"\n          part=\"img\"\n          style=${styleMap(styleVars)}\n          aria-label=${this.alt}\n          role=\"img\"\n        ></div>\n      `;\n    }\n\n    return html`\n      <img\n        src=${displaySrc}\n        alt=${this.alt}\n        srcset=${this.srcset || nothing}\n        sizes=${sizesAttr || nothing}\n        loading=${this.loading}\n        decoding=${this.decoding}\n        style=${styleMap(styleVars)}\n        part=\"img\"\n      />\n    `;\n  }\n}\n"],"names":["SkyImage","LitElement","constructor","super","arguments","this","src","alt","width","height","aspectRatio","borderRadius","boxShadow","objectFit","objectPosition","srcset","sizes","autoSizes","_computedSizes","loading","decoding","preset","_presets","PresetController","_sizesRafId","_updateSizes","requestAnimationFrame","w","Math","ceil","getBoundingClientRect","next","img","renderRoot","querySelector","HTMLImageElement","connectedCallback","_ensureAutoSizesObserver","firstUpdated","_ro","ResizeObserver","observe","updated","changed","has","disconnect","removeAttribute","_shouldResyncImageSource","_resyncImageSource","get","disconnectedCallback","cancelAnimationFrame","trim","_resolvedSizesAttr","_displaySrc","explicit","resolveImageFallbackSrc","_applyImgAttrs","srcsetChanged","sizesAttr","replacement","cloneNode","style","getAttribute","setAttribute","replaceWith","render","displaySrc","hasSrc","styleVars","html","nothing","styleMap","styles","css","__decorateClass","property","type","String","prototype","Boolean","reflect","customElement"],"mappings":"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"}

package/dist/sky-image/srcset-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"srcset-utils.js","sources":["../../src/sky-image/srcset-utils.ts"],"sourcesContent":["export type SrcsetCandidate = {\n  url: string;\n  width?: number;\n  density?: number;\n};\n\n/** Parse a comma-separated `srcset` attribute into URL + descriptor pairs. */\nexport function parseSrcset(srcset: string): SrcsetCandidate[] {\n  const trimmed = srcset.trim();\n  if (!trimmed) return [];\n\n  const out: SrcsetCandidate[] = [];\n  for (const piece of trimmed.split(',')) {\n    const parts = piece.trim().split(/\\s+/).filter(Boolean);\n    const url = parts[0];\n    if (!url) continue;\n\n    const descriptor = parts[1];\n    if (!descriptor) {\n      out.push({ url });\n      continue;\n    }\n    if (descriptor.endsWith('w')) {\n      const width = Number.parseInt(descriptor.slice(0, -1), 10);\n      out.push({ url, width: Number.isFinite(width) ? width : undefined });\n      continue;\n    }\n    if (descriptor.endsWith('x')) {\n      const density = Number.parseFloat(descriptor.slice(0, -1));\n      out.push({\n        url,\n        density: Number.isFinite(density) ? density : undefined,\n      });\n      continue;\n    }\n    out.push({ url });\n  }\n  return out;\n}\n\n/** Pick the `src` fallback the UA should use for a given `srcset`. */\nexport function resolveImageFallbackSrc(src: string, srcset: string): string {\n  const explicit = src.trim();\n  const candidates = parseSrcset(srcset);\n  if (!candidates.length) return explicit;\n\n  if (explicit && candidates.some((c) => c.url === explicit)) {\n    return explicit;\n  }\n\n  const widthCandidates = candidates.filter(\n    (c): c is SrcsetCandidate & { width: number } =>\n      typeof c.width === 'number' && c.width > 0\n  );\n  if (widthCandidates.length) {\n    return widthCandidates.reduce((best, c) =>\n      c.width >= best.width ? c : best\n    ).url;\n  }\n\n  const densityCandidates = candidates.filter(\n    (c): c is SrcsetCandidate & { density: number } =>\n      typeof c.density === 'number' && c.density > 0\n  );\n  if (densityCandidates.length) {\n    return densityCandidates.reduce((best, c) =>\n      c.density >= best.density ? c : best\n    ).url;\n  }\n\n  return candidates[0]?.url ?? explicit;\n}\n"],"names":["parseSrcset","srcset","trimmed","trim","out","piece","split","parts","filter","Boolean","url","descriptor","endsWith","width","Number","parseInt","slice","push","isFinite","density","parseFloat","resolveImageFallbackSrc","src","explicit","candidates","length","some","c","widthCandidates","reduce","best","densityCandidates"],"mappings":"AAOO,SAASA,EAAYC,GAC1B,MAAMC,EAAUD,EAAOE,OACvB,IAAKD,EAAS,MAAO,GAErB,MAAME,EAAyB,GAC/B,IAAA,MAAWC,KAASH,EAAQI,MAAM,KAAM,CACtC,MAAMC,EAAQF,EAAMF,OAAOG,MAAM,OAAOE,OAAOC,SACzCC,EAAMH,EAAM,GAClB,IAAKG,EAAK,SAEV,MAAMC,EAAaJ,EAAM,GACzB,GAAKI,EAAL,CAIA,GAAIA,EAAWC,SAAS,KAAM,CAC5B,MAAMC,EAAQC,OAAOC,SAASJ,EAAWK,MAAM,MAAQ,IACvDZ,EAAIa,KAAK,CAAEP,MAAKG,MAAOC,OAAOI,SAASL,GAASA,OAAQ,IACxD,QACF,CACA,GAAIF,EAAWC,SAAS,KAAM,CAC5B,MAAMO,EAAUL,OAAOM,WAAWT,EAAWK,MAAM,GAAG,IACtDZ,EAAIa,KAAK,CACPP,MACAS,QAASL,OAAOI,SAASC,GAAWA,OAAU,IAEhD,QACF,CACAf,EAAIa,KAAK,CAAEP,OAdX,MAFEN,EAAIa,KAAK,CAAEP,OAiBf,CACA,OAAON,CACT,CAGO,SAASiB,EAAwBC,EAAarB,GACnD,MAAMsB,EAAWD,EAAInB,OACfqB,EAAaxB,EAAYC,GAC/B,IAAKuB,EAAWC,OAAQ,OAAOF,EAE/B,GAAIA,GAAYC,EAAWE,KAAMC,GAAMA,EAAEjB,MAAQa,GAC/C,OAAOA,EAGT,MAAMK,EAAkBJ,EAAWhB,OAChCmB,GACoB,iBAAZA,EAAEd,OAAsBc,EAAEd,MAAQ,GAE7C,GAAIe,EAAgBH,OAClB,OAAOG,EAAgBC,OAAO,CAACC,EAAMH,IACnCA,EAAEd,OAASiB,EAAKjB,MAAQc,EAAIG,GAC5BpB,IAGJ,MAAMqB,EAAoBP,EAAWhB,OAClCmB,GACsB,iBAAdA,EAAER,SAAwBQ,EAAER,QAAU,GAEjD,OAAIY,EAAkBN,OACbM,EAAkBF,OAAO,CAACC,EAAMH,IACrCA,EAAER,SAAWW,EAAKX,QAAUQ,EAAIG,GAChCpB,IAGGc,EAAW,IAAId,KAAOa,CAC/B"}
+{"version":3,"file":"srcset-utils.js","sources":["../../src/sky-image/srcset-utils.ts"],"sourcesContent":["export type SrcsetCandidate = {\r\n  url: string;\r\n  width?: number;\r\n  density?: number;\r\n};\r\n\r\n/** Parse a comma-separated `srcset` attribute into URL + descriptor pairs. */\r\nexport function parseSrcset(srcset: string): SrcsetCandidate[] {\r\n  const trimmed = srcset.trim();\r\n  if (!trimmed) return [];\r\n\r\n  const out: SrcsetCandidate[] = [];\r\n  for (const piece of trimmed.split(',')) {\r\n    const parts = piece.trim().split(/\\s+/).filter(Boolean);\r\n    const url = parts[0];\r\n    if (!url) continue;\r\n\r\n    const descriptor = parts[1];\r\n    if (!descriptor) {\r\n      out.push({ url });\r\n      continue;\r\n    }\r\n    if (descriptor.endsWith('w')) {\r\n      const width = Number.parseInt(descriptor.slice(0, -1), 10);\r\n      out.push({ url, width: Number.isFinite(width) ? width : undefined });\r\n      continue;\r\n    }\r\n    if (descriptor.endsWith('x')) {\r\n      const density = Number.parseFloat(descriptor.slice(0, -1));\r\n      out.push({\r\n        url,\r\n        density: Number.isFinite(density) ? density : undefined,\r\n      });\r\n      continue;\r\n    }\r\n    out.push({ url });\r\n  }\r\n  return out;\r\n}\r\n\r\n/** Pick the `src` fallback the UA should use for a given `srcset`. */\r\nexport function resolveImageFallbackSrc(src: string, srcset: string): string {\r\n  const explicit = src.trim();\r\n  const candidates = parseSrcset(srcset);\r\n  if (!candidates.length) return explicit;\r\n\r\n  if (explicit && candidates.some((c) => c.url === explicit)) {\r\n    return explicit;\r\n  }\r\n\r\n  const widthCandidates = candidates.filter(\r\n    (c): c is SrcsetCandidate & { width: number } =>\r\n      typeof c.width === 'number' && c.width > 0\r\n  );\r\n  if (widthCandidates.length) {\r\n    return widthCandidates.reduce((best, c) =>\r\n      c.width >= best.width ? c : best\r\n    ).url;\r\n  }\r\n\r\n  const densityCandidates = candidates.filter(\r\n    (c): c is SrcsetCandidate & { density: number } =>\r\n      typeof c.density === 'number' && c.density > 0\r\n  );\r\n  if (densityCandidates.length) {\r\n    return densityCandidates.reduce((best, c) =>\r\n      c.density >= best.density ? c : best\r\n    ).url;\r\n  }\r\n\r\n  return candidates[0]?.url ?? explicit;\r\n}\r\n"],"names":["parseSrcset","srcset","trimmed","trim","out","piece","split","parts","filter","Boolean","url","descriptor","endsWith","width","Number","parseInt","slice","push","isFinite","density","parseFloat","resolveImageFallbackSrc","src","explicit","candidates","length","some","c","widthCandidates","reduce","best","densityCandidates"],"mappings":"AAOO,SAASA,EAAYC,GAC1B,MAAMC,EAAUD,EAAOE,OACvB,IAAKD,EAAS,MAAO,GAErB,MAAME,EAAyB,GAC/B,IAAA,MAAWC,KAASH,EAAQI,MAAM,KAAM,CACtC,MAAMC,EAAQF,EAAMF,OAAOG,MAAM,OAAOE,OAAOC,SACzCC,EAAMH,EAAM,GAClB,IAAKG,EAAK,SAEV,MAAMC,EAAaJ,EAAM,GACzB,GAAKI,EAAL,CAIA,GAAIA,EAAWC,SAAS,KAAM,CAC5B,MAAMC,EAAQC,OAAOC,SAASJ,EAAWK,MAAM,MAAQ,IACvDZ,EAAIa,KAAK,CAAEP,MAAKG,MAAOC,OAAOI,SAASL,GAASA,OAAQ,IACxD,QACF,CACA,GAAIF,EAAWC,SAAS,KAAM,CAC5B,MAAMO,EAAUL,OAAOM,WAAWT,EAAWK,MAAM,GAAG,IACtDZ,EAAIa,KAAK,CACPP,MACAS,QAASL,OAAOI,SAASC,GAAWA,OAAU,IAEhD,QACF,CACAf,EAAIa,KAAK,CAAEP,OAdX,MAFEN,EAAIa,KAAK,CAAEP,OAiBf,CACA,OAAON,CACT,CAGO,SAASiB,EAAwBC,EAAarB,GACnD,MAAMsB,EAAWD,EAAInB,OACfqB,EAAaxB,EAAYC,GAC/B,IAAKuB,EAAWC,OAAQ,OAAOF,EAE/B,GAAIA,GAAYC,EAAWE,KAAMC,GAAMA,EAAEjB,MAAQa,GAC/C,OAAOA,EAGT,MAAMK,EAAkBJ,EAAWhB,OAChCmB,GACoB,iBAAZA,EAAEd,OAAsBc,EAAEd,MAAQ,GAE7C,GAAIe,EAAgBH,OAClB,OAAOG,EAAgBC,OAAO,CAACC,EAAMH,IACnCA,EAAEd,OAASiB,EAAKjB,MAAQc,EAAIG,GAC5BpB,IAGJ,MAAMqB,EAAoBP,EAAWhB,OAClCmB,GACsB,iBAAdA,EAAER,SAAwBQ,EAAER,QAAU,GAEjD,OAAIY,EAAkBN,OACbM,EAAkBF,OAAO,CAACC,EAAMH,IACrCA,EAAER,SAAWW,EAAKX,QAAUQ,EAAIG,GAChCpB,IAGGc,EAAW,IAAId,KAAOa,CAC/B"}

package/dist/sky-input/sky-input.d.ts

@@ -87,6 +87,9 @@ export type SkyInputIconClickDetail = {
  * @csspart file-info - File count and size info below the file input.
  * @csspart input-prefix - Inline prefix fragment inside the field.
  * @csspart input-suffix - Inline suffix fragment inside the field.
+ * @csspart number-btn - Wrapper around increment/decrement controls.
+ * @csspart increment-btn - Increase-value control.
+ * @csspart decrement-btn - Decrease-value control.
  *
  * @Behavior
  * - Extends `FormControlBase` for automatic form association and validation integration

package/dist/sky-input/sky-input.js

@@ -149,9 +149,10 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
         role=${s(this.nativeInputRole())}
       />
     `,x=()=>r&&this.showNumberButtons?i`
-            <div class="number-btn">
+            <div class="number-btn" part="number-btn">
               <button
                 class="decrement-btn"
+                part="decrement-btn"
                 type="button"
                 tabindex="-1"
                 @mousedown=${this.keepInputFocused}
@@ -159,10 +160,11 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
                 @click=${t=>{t.stopPropagation(),this.decrementValue()}}
                 aria-label="Decrease value"
               >
-                <sky-icon icon="ion:minus"></sky-icon>
+                <sky-icon icon="ion:chevron-down" width=${this.compact?"12":"14"} height=${this.compact?"12":"14"}></sky-icon>
               </button>
               <button
                 class="increment-btn"
+                part="increment-btn"
                 type="button"
                 tabindex="-1"
                 @mousedown=${this.keepInputFocused}
@@ -170,7 +172,7 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
                 @click=${t=>{t.stopPropagation(),this.incrementValue()}}
                 aria-label="Increase value"
               >
-                <sky-icon icon="ion:add"></sky-icon>
+                <sky-icon icon="ion:chevron-up" width=${this.compact?"12":"14"} height=${this.compact?"12":"14"}></sky-icon>
               </button>
             </div>
           `:null,w=()=>n&&this.showPasswordToggle?i`
@@ -713,6 +715,15 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
       gap: var(--sky-input-gap);
     }
 
+    .input-wrapper[compact] .number-btn {
+      flex-direction: column-reverse;
+      align-self: stretch;
+      width: 1.05rem;
+      margin-inline-end: 0;
+      gap: 0;
+      border: 0;
+    }
+
     :dir(rtl).number-btn {
       margin-inline-end: var(--sky-input-pad-x-sm);
     }
@@ -731,23 +742,37 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
 
     .increment-btn,
     .decrement-btn {
-      background: var(--sky-glass-solid);
-      color: var(--sky-text-primary);
-      border: var(--sky-border-primary);
-      border-radius: var(--sky-radius-primary);
+      background: transparent;
+      color: var(--sky-text-tertiary);
+      border: 0;
+      box-shadow: none;
+      border-radius: var(--sky-radius-sm, 4px);
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--sky-input-pad-x-xs) var(--sky-input-pad-x-sm);
       font-size: var(--sky-font-size-sm);
       cursor: pointer;
-      transition: color var(--sky-transition-normal, 200ms ease);
+      transition: color var(--sky-transition-normal, 200ms ease),
+        background-color var(--sky-transition-normal, 200ms ease);
       font-family: var(--sky-font);
     }
 
+    .input-wrapper[compact] .increment-btn,
+    .input-wrapper[compact] .decrement-btn {
+      flex: 1 1 auto;
+      width: 100%;
+      min-height: 0;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+    }
+
     .increment-btn:hover,
     .decrement-btn:hover {
-      color: var(--sky-input-color);
+      color: var(--sky-text-primary);
+      background: color-mix(in srgb, var(--sky-text-primary) 6%, transparent);
     }
 
     .toggle-password {
@@ -802,8 +827,8 @@ import{css as t,LitElement as e,html as i,nothing as a}from"lit";import{ifDefine
       padding-inline-end: var(--sky-input-pad-x);
     }
 
-    .input-wrapper[compact] .input-affix {
-      font-size: var(--sky-font-size-sm);
+    .input-wrapper[compact] .input-affix.suffix {
+      padding-inline-end: var(--sky-input-pad-x-sm);
     }
 
     .input-wrapper:has(.input-affix.prefix) input,