@sky.ui/core 0.0.1

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

@@ -0,0 +1,154 @@
+import { LitElement } from "lit";
+export type SkyFlexcolAlignSelf = "auto" | "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
+/**
+ * @element sky-flexcol
+ *
+ * @summary Flex column item for `sky-flexbox` layouts with responsive span controls.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/flexbox
+ *
+ * @slot - Default slot for column content.
+ *
+ * @property {number} span - Base number of columns to span.
+ * @property {number | undefined} spanLg - Span at large breakpoints.
+ * @property {number | undefined} spanMd - Span at medium breakpoints.
+ * @property {number | undefined} spanSm - Span at small breakpoints.
+ * @property {number | undefined} spanXs - Span at extra-small breakpoints.
+ * @property {number} grow - Flex grow factor.
+ * @property {number} shrink - Flex shrink factor.
+ * @property {string | null} basis - Flex basis override.
+ * @property {number | undefined} order - Flex order override.
+ * @property {SkyFlexcolAlignSelf | undefined} alignSelf - Cross-axis alignment override.
+ * @method refreshStyles Re-applies CSS custom properties from current values.
+ * @method getSpan Returns current base span value.
+ * @method setSpan Updates base span value and refreshes styles.
+ *
+ * @csspart col - The flex item wrapper.
+ *
+ * @Behavior
+ * - Designed to work within `<sky-flexbox>` containers
+ * - Supports responsive column spans with breakpoint attributes
+ * - Exposes all standard flex item properties
+ * - Automatically syncs properties to CSS custom properties
+ *
+ * - `span`: Base span across columns (1 to container's column count)
+ * - `span-lg`: Span at large screens (≤1200px)
+ * - `span-md`: Span at medium screens (≤992px)
+ * - `span-sm`: Span at small screens (≤768px)
+ * - `span-xs`: Span at extra-small screens (≤576px)
+ *
+ * @example
+ * ```html
+ * <sky-flexbox col="12" gap="16px">
+ *   <sky-flexcol span="8">
+ *     <div class="card">Main Content</div>
+ *   </sky-flexcol>
+ *   <sky-flexcol span="4">
+ *     <div class="card">Sidebar</div>
+ *   </sky-flexcol>
+ * </sky-flexbox>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-flexbox col="12" gap="16px">
+ *     <sky-flexcol span="8" span-md="12">Main Content</sky-flexcol>
+ *     <sky-flexcol span="4" span-md="12">Sidebar</sky-flexcol>
+ *   </sky-flexbox>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-flexbox col="12" gap="16px">
+ *       <sky-flexcol span="8" span-md="12">Main Content</sky-flexcol>
+ *       <sky-flexcol span="4" span-md="12">Sidebar</sky-flexcol>
+ *     </sky-flexbox>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyFlexcol extends LitElement {
+    /**
+     * Number of columns to span.
+     * @public
+     */
+    span: number;
+    /**
+     * Columns spanned at large screens (≤1200px).
+     * @public
+     */
+    spanLg?: number;
+    /**
+     * Columns spanned at medium screens (≤992px).
+     * @public
+     */
+    spanMd?: number;
+    /**
+     * Columns spanned at small screens (≤768px).
+     * @public
+     */
+    spanSm?: number;
+    /**
+     * Columns spanned at extra-small screens (≤576px).
+     * @public
+     */
+    spanXs?: number;
+    /**
+     * Flex grow factor.
+     * @public
+     */
+    grow: number;
+    /**
+     * Flex shrink factor.
+     * @public
+     */
+    shrink: number;
+    /**
+     * Flex basis (e.g., `"200px"` or `"auto"`).
+     * @public
+     */
+    basis: string | null;
+    /**
+     * Flex order relative to siblings.
+     * @public
+     */
+    order?: number;
+    /**
+     * Self alignment override.
+     * @public
+     */
+    alignSelf?: SkyFlexcolAlignSelf;
+    static styles: import("lit").CSSResult;
+    /** @protected */
+    firstUpdated(): void;
+    /** @protected */
+    updated(changed: Map<string | number | symbol, unknown>): void;
+    /**
+     * Syncs component properties to CSS custom properties.
+     * @private
+     */
+    private syncVars;
+    /**
+     * Forces resynchronization of CSS custom properties.
+     * Useful when properties are changed programmatically.
+     * @public
+     */
+    refreshStyles(): void;
+    /**
+     * Gets the current span value.
+     * @returns Current span value
+     * @public
+     */
+    getSpan(): number;
+    /**
+     * Sets the span value and updates styles.
+     * @param value - New span value
+     * @public
+     */
+    setSpan(value: number): void;
+    /** @protected */
+    render(): import("lit-html").TemplateResult<1>;
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-flexcol.js","sources":["../../src/sky-flexcol/sky-flexcol.ts"],"sourcesContent":[null],"names":["SkyFlexcol","LitElement","constructor","this","span","grow","shrink","basis","styles","css","firstUpdated","syncVars","updated","changed","has","style","setProperty","String","spanLg","spanMd","spanSm","spanXs","order","removeProperty","alignSelf","refreshStyles","getSpan","setSpan","value","render","html","__decorate","property","type","Number","prototype","customElement"],"mappings":"uKAkFO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAMLC,KAAAC,KAAO,EAmCPD,KAAAE,KAAO,EAOPF,KAAAG,OAAS,EAOTH,KAAAI,MAAuB,IAwHzB,QAxGgBJ,KAAAK,OAASC,CAAG;;;;;;;;;;;;GAYxB,CAGO,YAAAC,GACPP,KAAKQ,UACP,CAGS,OAAAC,CAAQC,IAEbA,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,SACZD,EAAQC,IAAI,WACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,UACZD,EAAQC,IAAI,eAEZX,KAAKQ,UAET,CAMQ,QAAAA,GAENR,KAAKY,MAAMC,YAAY,SAAUC,OAAOd,KAAKC,OACzCD,KAAKe,QAAQf,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKe,SAC7Df,KAAKgB,QAAQhB,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKgB,SAC7DhB,KAAKiB,QAAQjB,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKiB,SAC7DjB,KAAKkB,QAAQlB,KAAKY,MAAMC,YAAY,YAAaC,OAAOd,KAAKkB,SAGjElB,KAAKY,MAAMC,YAAY,aAAcC,OAAOd,KAAKE,OACjDF,KAAKY,MAAMC,YAAY,eAAgBC,OAAOd,KAAKG,SAEjC,MAAdH,KAAKmB,MACPnB,KAAKY,MAAMC,YAAY,cAAeC,OAAOd,KAAKmB,QAElDnB,KAAKY,MAAMQ,eAAe,eAGxBpB,KAAKqB,UACPrB,KAAKY,MAAMC,YAAY,mBAAoBb,KAAKqB,WAEhDrB,KAAKY,MAAMQ,eAAe,oBAGxBpB,KAAKI,MACPJ,KAAKY,MAAMC,YAAY,cAAeb,KAAKI,OAE3CJ,KAAKY,MAAMQ,eAAe,cAE9B,CAOO,aAAAE,GACLtB,KAAKQ,UACP,CAOO,OAAAe,GACL,OAAOvB,KAAKC,IACd,CAOO,OAAAuB,CAAQC,GACbzB,KAAKC,KAAOwB,EACZzB,KAAKQ,UACP,CAGS,MAAAkB,GACP,OAAOC,CAAI,4BACb,GAxKAC,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACTlC,EAAAmC,UAAA,eAOTJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACFlC,EAAAmC,UAAA,iBAOhBJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACTlC,EAAAmC,UAAA,eAOTJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACPlC,EAAAmC,UAAA,iBAOXJ,EAAA,CADCC,EAAS,CAAEC,KAAMhB,kCACUjB,EAAAmC,UAAA,gBAO5BJ,EAAA,CADCC,EAAS,CAAEC,KAAMC,kCACHlC,EAAAmC,UAAA,gBAOfJ,EAAA,CADCC,EAAS,CAAEC,KAAMhB,kCACcjB,EAAAmC,UAAA,oBArErBnC,EAAU+B,EAAA,CADtBK,EAAc,gBACFpC"}

package/dist/sky-flexitem/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-flexitem";

package/dist/sky-flexitem/index.js

@@ -0,0 +1 @@
+export * from './sky-flexitem.js';

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

@@ -0,0 +1,114 @@
+import { LitElement } from "lit";
+export type SkyFlexitemDirection = "horizontal" | "vertical";
+export type SkyFlexitemSizeDetail = {
+    element: SkyFlexitem;
+    width: number;
+    height: number;
+    flexDirection: SkyFlexitemDirection;
+};
+/**
+ * @element sky-flexitem
+ *
+ * @summary Flex item for `sky-flexbar` that adapts orientation and reports size changes.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/flexbar
+ *
+ * @slot title - The title/content slot for the flex item.
+ * @slot content - The main content slot for the flex item.
+ * @slot hamburger - Special slot for hamburger menu context.
+ *
+ * @property {SkyFlexitemDirection} flexDirection - Layout direction used by the internal item container.
+ * @fires {CustomEvent<SkyFlexitemSizeDetail>} flexitem-size - Fired when the component size changes.
+ * @method getSize Returns the current element bounding rect.
+ * @method isInHamburger Returns whether the item is in hamburger-menu context.
+ *
+ * @csspart item - The main container element.
+ * @csspart in-hamburger - Applied when item is in hamburger menu context.
+ * @csspart in-bar - Applied when item is in navigation bar context.
+ *
+ * @Behavior
+ * - Dynamically adjusts layout direction based on parent flex direction
+ * - Supports both horizontal and vertical orientations
+ * - Automatically reports size changes via ResizeObserver
+ * - Responds to flex-direction-changed events from parent components
+ * - Provides different styling based on slot assignment (hamburger vs bar)
+ *
+ * - `title`: Typically used for labels, icons, or short text
+ * - `content`: Main content area for longer text or complex content
+ * - `hamburger`: Special slot for items within a hamburger menu context
+ *
+ * @example
+ * ```html
+ * <sky-flexitem flexdirection="horizontal">
+ *   <span slot="title">Item 1</span>
+ *   <div slot="content">Content for item 1</div>
+ * </sky-flexitem>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-flexitem flexdirection="horizontal">
+ *     <span slot="title">Item 1</span>
+ *     <span slot="content">Content for item 1</span>
+ *   </sky-flexitem>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-flexitem flexdirection="horizontal">
+ *       <span slot="title">Item 1</span>
+ *       <span slot="content">Content for item 1</span>
+ *     </sky-flexitem>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyFlexitem extends LitElement {
+    /**
+     * Layout direction of the flex item.
+     * @public
+     */
+    flexDirection: SkyFlexitemDirection;
+    /**
+     * Internal state tracking if item is in hamburger menu.
+     * @private
+     */
+    private _inHamburger;
+    /** @private */
+    private _resizeObserver?;
+    static styles: import("lit").CSSResult;
+    static get observedAttributes(): string[];
+    /** @protected */
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    /**
+     * Handles flex direction changes from parent components.
+     * @param {Event} e - The flex-direction-changed event
+     * @private
+     */
+    private _onFlexDir;
+    /**
+     * Measures and reports the current size of the flex item.
+     * @private
+     */
+    private _measureAndReportSize;
+    /** @protected */
+    connectedCallback(): void;
+    /** @protected */
+    disconnectedCallback(): void;
+    /**
+     * Gets the current size of the flex item.
+     * @returns {DOMRect} The bounding rectangle of the element
+     * @public
+     */
+    getSize(): DOMRect;
+    /**
+     * Checks if the item is currently in hamburger menu context.
+     * @returns {boolean} True if in hamburger menu
+     * @public
+     */
+    isInHamburger(): boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-flexitem/sky-flexitem.js

@@ -0,0 +1,45 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as i,css as r,html as s}from"lit";import{property as n,state as o,customElement as l}from"lit/decorators.js";let a=class extends i{constructor(){super(...arguments),this.flexDirection="vertical",this._inHamburger=!1,this._onFlexDir=e=>{const t=e;t.detail&&(this.flexDirection=t.detail.flexDirection)}}static{this.styles=r`
+    :host {
+      display: block;
+      box-sizing: border-box;
+    }
+
+    .flex-item-container {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      height: 100%;
+    }
+
+    :host([flexdirection="vertical"]) .flex-item-container {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .content {
+      display: block;
+      flex: 1;
+      min-width: 0; /* Prevent overflow */
+    }
+
+    /* RTL support */
+    :host([dir="rtl"]) .flex-item-container {
+      flex-direction: row-reverse;
+    }
+
+    :host([dir="rtl"][flexdirection="vertical"]) .flex-item-container {
+      align-items: flex-end;
+    }
+  `}static get observedAttributes(){return[...super.observedAttributes,"slot"]}attributeChangedCallback(e,t,i){super.attributeChangedCallback(e,t,i),"slot"===e&&t!==i&&(this._inHamburger="hamburger"===i,this.requestUpdate())}_measureAndReportSize(){const e=this.offsetWidth,t=this.offsetHeight;this.dispatchEvent(new CustomEvent("flexitem-size",{bubbles:!0,composed:!0,detail:{element:this,width:e,height:t,flexDirection:this.flexDirection}}))}connectedCallback(){super.connectedCallback(),this.classList.add("menu-parent"),this._inHamburger="hamburger"===this.slot,this._resizeObserver=new ResizeObserver(()=>this._measureAndReportSize()),this._resizeObserver.observe(this),this.addEventListener("flex-direction-changed",this._onFlexDir),this.updateComplete.then(()=>this._measureAndReportSize())}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver?.disconnect(),this.removeEventListener("flex-direction-changed",this._onFlexDir)}getSize(){return this.getBoundingClientRect()}isInHamburger(){return this._inHamburger}render(){const e=this._inHamburger?"item in-hamburger":"item in-bar";return s`
+      <div 
+        part=${e} 
+        class="flex-item-container"
+        role="${this._inHamburger?"menuitem":"listitem"}"
+        aria-orientation="${this.flexDirection}"
+      >
+        <slot name="title"></slot>
+        <slot name="content" class="content"></slot>
+      </div>
+    `}};e([n({type:String,reflect:!0}),t("design:type",String)],a.prototype,"flexDirection",void 0),e([o(),t("design:type",Object)],a.prototype,"_inHamburger",void 0),a=e([l("sky-flexitem")],a);export{a as SkyFlexitem};
+//# sourceMappingURL=sky-flexitem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-flexitem.js","sources":["../../src/sky-flexitem/sky-flexitem.ts"],"sourcesContent":[null],"names":["SkyFlexitem","LitElement","constructor","this","flexDirection","_inHamburger","_onFlexDir","e","ce","detail","styles","css","observedAttributes","super","attributeChangedCallback","name","oldVal","newVal","requestUpdate","_measureAndReportSize","width","offsetWidth","height","offsetHeight","dispatchEvent","CustomEvent","bubbles","composed","element","connectedCallback","classList","add","slot","_resizeObserver","ResizeObserver","observe","addEventListener","updateComplete","then","disconnectedCallback","disconnect","removeEventListener","getSize","getBoundingClientRect","isInHamburger","render","partTokens","html","__decorate","property","type","String","reflect","prototype","state","customElement"],"mappings":"kLAwEO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAMLC,KAAAC,cAAsC,WAO9BD,KAAAE,cAAe,EA2DfF,KAAAG,WAAcC,IACpB,MAAMC,EAAKD,EACNC,EAAGC,SACRN,KAAKC,cAAgBI,EAAGC,OAAOL,eAgFnC,QAzIkBD,KAAAO,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiC1B,CAGF,6BAAoBC,GAClB,MAAO,IAAIC,MAAMD,mBAAoB,OACvC,CAGS,wBAAAE,CAAyBC,EAAcC,EAAuBC,GACrEJ,MAAMC,yBAAyBC,EAAMC,EAAQC,GAChC,SAATF,GAAmBC,IAAWC,IAChCd,KAAKE,aAA0B,cAAXY,EACpBd,KAAKe,gBAET,CAiBQ,qBAAAC,GACN,MAAMC,EAAQjB,KAAKkB,YACbC,EAASnB,KAAKoB,aACpBpB,KAAKqB,cACH,IAAIC,YAAmC,gBAAiB,CACtDC,SAAS,EACTC,UAAU,EACVlB,OAAQ,CACNmB,QAASzB,KACTiB,QACAE,SACAlB,cAAeD,KAAKC,iBAI5B,CAGS,iBAAAyB,GACPhB,MAAMgB,oBAEN1B,KAAK2B,UAAUC,IAAI,eAGnB5B,KAAKE,aAA6B,cAAdF,KAAK6B,KAEzB7B,KAAK8B,gBAAkB,IAAIC,eAAe,IAAM/B,KAAKgB,yBACrDhB,KAAK8B,gBAAgBE,QAAQhC,MAE7BA,KAAKiC,iBAAiB,yBAA0BjC,KAAKG,YAErDH,KAAKkC,eAAeC,KAAK,IAAMnC,KAAKgB,wBACtC,CAGS,oBAAAoB,GACP1B,MAAM0B,uBACNpC,KAAK8B,iBAAiBO,aACtBrC,KAAKsC,oBAAoB,yBAA0BtC,KAAKG,WAC1D,CAOO,OAAAoC,GACL,OAAOvC,KAAKwC,uBACd,CAOO,aAAAC,GACL,OAAOzC,KAAKE,YACd,CAES,MAAAwC,GACP,MAAMC,EAAa3C,KAAKE,aAAe,oBAAsB,cAC7D,OAAO0C,CAAI;;eAEAD;;gBAEC3C,KAAKE,aAAe,WAAa;4BACrBF,KAAKC;;;;;KAM/B,GApJA4C,EAAA,CADCC,EAAS,CAAEC,KAAMC,OAAQC,SAAS,6BACcpD,EAAAqD,UAAA,wBAOzCL,EAAA,CADPM,6BAC4BtD,EAAAqD,UAAA,uBAblBrD,EAAWgD,EAAA,CADvBO,EAAc,iBACFvD"}

package/dist/sky-form/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-form";

package/dist/sky-form/index.js

@@ -0,0 +1 @@
+export * from './sky-form.js';

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

@@ -0,0 +1,286 @@
+import { LitElement } from "lit";
+export type SkyFormMode = "client" | "server";
+export type SkyFormMethod = "get" | "post";
+export type SkyFormEnctype = "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+export type SkyFormAutocomplete = "on" | "off";
+export type SkyFormValues = Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+export type SkyFormChangeDetail = {
+    values: SkyFormValues;
+    formData: FormData;
+    success: boolean;
+};
+export type SkyFormValidationErrorsDetail = {
+    errors: string[];
+};
+export type SkyFormSubmitDetail = {
+    values: SkyFormValues;
+    formData: FormData;
+    success: boolean;
+};
+export type SkyFormFormDataFallbackDetail = {
+    formData: FormData;
+};
+/**
+ * @element sky-form
+ *
+ * @summary Form wrapper with unified validation, error aggregation, and client/server submit flows.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/form
+ *
+ * @slot - Form elements: inputs, buttons, and other form controls.
+ *
+ * @property {boolean} liveValidation - Validates and emits `form-change` on value changes.
+ * @property {boolean} showErrors - Shows validation errors in child controls when available.
+ * @property {boolean} errorBox - Shows consolidated validation messages above the form.
+ * @property {string} errorBoxMessage - Header message shown in the consolidated error box.
+ * @property {SkyFormMode} mode - Submission mode (`client` or `server`).
+ * @property {SkyFormMethod | undefined} method - Native form method in server mode.
+ * @property {string | undefined} action - Native form action in server mode.
+ * @property {string | undefined} target - Native form target in server mode.
+ * @property {SkyFormEnctype | undefined} enctype - Native form encoding type.
+ * @property {SkyFormAutocomplete | undefined} autocomplete - Native form autocomplete behavior.
+ * @property {boolean} noValidate - Disables native HTML constraint UI.
+ * @property {boolean} enterSubmit - Submits on Enter for non-textarea controls.
+ * @property {boolean} resetOnSubmit - Resets form after successful submit.
+ * @property {string | null} csrfToken - Optional CSRF token value for app-level submit handling.
+ *
+ * @fires {CustomEvent<SkyFormChangeDetail>} form-change - Fired when form values change in live validation mode.
+ * @fires {CustomEvent<SkyFormValidationErrorsDetail>} validation-errors - Fired when aggregated validation errors change.
+ * @fires {CustomEvent<SkyFormFormDataFallbackDetail> | FormDataEvent} formdata - Fired before client-mode submit with form data.
+ * @fires {CustomEvent<SkyFormSubmitDetail>} form-submit - Fired after successful client-mode submit handling.
+ *
+ * @method checkValidity Returns native form validity without UI reporting.
+ * @method reportValidity Returns native form validity and reports native UI messages.
+ * @method requestSubmit Requests submission using optional submitter.
+ * @method reset Resets native form and values.
+ * @method resetForm Alias for `reset`.
+ * @method submit Submits form using mode-specific client/server flow.
+ *
+ * @csspart error-box - Container for the consolidated error messages.
+ * @csspart error-list - List element containing validation errors.
+ *
+ * @Behavior
+ * - Provides seamless integration of custom form controls with native HTML form behavior
+ * - Supports both client-side AJAX submissions and traditional server-side submissions
+ * - Automatic validation aggregation from both native and custom form controls
+ * - Light DOM rendering for proper browser form association
+ *
+ * The component automatically associates form controls (including custom elements) with the native form
+ * using the `form` attribute, ensuring proper browser validation and FormData collection.
+ *
+ * - **Live Validation**: Validates on every input change (when liveValidation=true)
+ * - **Submit Validation**: Validates only on form submission
+ * - **Mixed Validation**: Combines both native HTML5 validation and custom component validation
+ *
+ * - **Client Mode**: Prevents page refresh, emits formdata/form-submit events for JavaScript handling
+ * - **Server Mode**: Allows traditional form submission with page navigation/refresh
+ *
+ * @example
+ * ```html
+ * <sky-form id="login-form" live-validation error-box>
+ *   <sky-input name="email" type="email" required label="Email"></sky-input>
+ *   <sky-input name="password" type="password" required label="Password"></sky-input>
+ *   <sky-button type="submit">Sign In</sky-button>
+ * </sky-form>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-form id="login-form" live-validation error-box @form-submit="onSubmit">
+ *     <sky-input name="email" type="email" required label="Email"></sky-input>
+ *     <sky-input name="password" type="password" required label="Password"></sky-input>
+ *     <sky-button type="submit">Sign In</sky-button>
+ *   </sky-form>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-form id="login-form" live-validation error-box>
+ *       <sky-input name="email" type="email" required label="Email"></sky-input>
+ *       <sky-input name="password" type="password" required label="Password"></sky-input>
+ *       <sky-button type="submit">Sign In</sky-button>
+ *     </sky-form>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyForm extends LitElement {
+    /**
+     * When true, validates form on every value change.
+     * @public
+     */
+    liveValidation: boolean;
+    /**
+     * Controls whether validation errors are displayed.
+     * @public
+     */
+    showErrors: boolean;
+    /**
+     * When true, displays a consolidated error box with all validation errors.
+     * @public
+     */
+    errorBox: boolean;
+    /**
+     * Custom message displayed in the error box header.
+     * @public
+     */
+    errorBoxMessage: string;
+    /**
+     * Submission mode: 'client' prevents page refresh, 'server' allows native form submission.
+     * @public
+     */
+    mode: SkyFormMode;
+    /**
+     * HTTP method for form submission (when mode='server').
+     * @public
+     */
+    method?: SkyFormMethod;
+    /**
+     * URL for form submission (when mode='server').
+     * @public
+     */
+    action?: string;
+    /**
+     * Target window/frame for form submission.
+     * @public
+     */
+    target?: string;
+    /**
+     * Form encoding type.
+     * @public
+     */
+    enctype?: SkyFormEnctype;
+    /**
+     * HTML autocomplete attribute.
+     * @public
+     */
+    autocomplete?: SkyFormAutocomplete;
+    /**
+     * When true, disables native HTML5 validation.
+     * @public
+     */
+    noValidate: boolean;
+    /**
+     * When true, pressing Enter in any input submits the form (except textarea).
+     * @public
+     */
+    enterSubmit: boolean;
+    /**
+     * When true, resets the form after successful submission.
+     * @public
+     */
+    resetOnSubmit: boolean;
+    /**
+     * CSRF token for form submission protection.
+     * @public
+     */
+    csrfToken: string | null;
+    /**
+   * Array of current validation error messages.
+   * @private
+   */
+    private validationErrors;
+    /**
+     * Indicates whether the last form submission was successful.
+     * @private
+     */
+    private submitSuccess;
+    /**
+   * Indicates whether validation is currently active (errors shown).
+   * @private
+   */
+    private validationActive;
+    /** Reference to the native form element. */
+    private _formEl;
+    private _mo?;
+    private _syncQueued;
+    private _handlingSubmit;
+    private _handlingInvalid;
+    /** MUST be light DOM for button[form="..."] + native id lookup */
+    protected createRenderRoot(): this;
+    /**
+     * Returns the native HTML form element.
+     * @public
+     */
+    get formElement(): HTMLFormElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _queueSync;
+    private _onEnterKey;
+    /**
+     * Make `document.getElementById(hostId)` return the native form.
+     * Copies host id => native form id and removes id from host to avoid duplicate ids.
+     */
+    private _moveHostIdToNativeForm;
+    /**
+     * Slotted controls remain in the light DOM under `<sky-form>`, not under the inner `<form>`.
+     * `_assignFormOwnerToChildren` needs a stable `id` on that `<form>` to set `form="…"` on
+     * associated controls. When the host has no `id`, generate one so association still works.
+     */
+    private _ensureNativeFormHasId;
+    private _handleValueChanged;
+    /**
+     * Whether the form passes constraint validation, without calling `form.checkValidity()`.
+     * `HTMLFormElement.checkValidity()` dispatches `invalid` on each invalid control; during
+     * liveValidation that runs on every keystroke and our capture listener would focus the first
+     * invalid field, stealing focus from the control the user is editing.
+     */
+    private _formValidQuiet;
+    private _emitFormChange;
+    /**
+     * Assigns form ownership to elements not inside the native <form> element.
+     * Ensures browser association for native submit + validation + FormData.
+     */
+    private _assignFormOwnerToChildren;
+    private _getSkyInputs;
+    private _emitValidationErrors;
+    private _onFormDataCapture;
+    private _onInvalidCapture;
+    private _refreshAggregates;
+    private _focusFirstInvalid;
+    private _focusElement;
+    private _syncNow;
+    private _onHostSubmitCapture;
+    private _formDataToJSON;
+    /** Activates validation mode and refreshes error aggregates. */
+    private _activateValidation;
+    /**
+     * Checks form validity without displaying validation messages.
+     * @returns {boolean} True if the form is valid, false otherwise.
+     * @public
+     */
+    checkValidity(): boolean;
+    /**
+     * Checks form validity and displays validation messages.
+     * @returns {boolean} True if the form is valid, false otherwise.
+     * @public
+     */
+    reportValidity(): boolean;
+    /**
+     * Requests form submission (compatible with native requestSubmit).
+     * @param {HTMLElement} submitter - Optional submitter element.
+     * @public
+     */
+    requestSubmit(submitter?: HTMLElement): void;
+    /**
+     * Resets the form to its initial state.
+     * @public
+     */
+    reset(): void;
+    /**
+     * Resets the form to its initial state (alias for reset()).
+     * @public
+     */
+    resetForm(): void;
+    /**
+     * Manually submits the form, respecting the current mode setting.
+     * In client mode, triggers the client-side submission flow.
+     * In server mode, performs native form submission.
+     * @public
+     */
+    submit(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}