@sky.ui/core 0.0.1

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

@@ -0,0 +1,101 @@
+import { PropertyValues } from "lit";
+import { FormControlBase, FormState } from "../helper/internals/form-control-base";
+export type SkyOtpValidation = (value: string) => true | string;
+export type SkyOtpValueChangedDetail = {
+    value: string;
+    otp: string;
+};
+export type SkyOtpValueClearedDetail = {
+    value: "";
+};
+export type SkyOtpValidationErrorDetail = {
+    errors: string[];
+};
+/**
+ * @element sky-otp
+ *
+ * @summary Segmented OTP/code input with masking, paste support, and commit-based change events.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/otp
+ *
+ * @uiVModel value value-changed
+ *
+ * @property {number} length - Number of OTP characters.
+ * @property {boolean} alphanumeric - Allows letters in addition to digits.
+ * @property {string} value - Canonical OTP value.
+ * @property {SkyOtpValidation[]} validations - Validator callbacks returning `true` or an error string.
+ * @property {boolean} showErrors - Shows first validation error when active.
+ * @property {boolean} masked - Masks visual characters using bullet glyph.
+ * @fires {CustomEvent<SkyOtpValueChangedDetail>} value-changed - Fired once per committed value change.
+ * @fires {CustomEvent<SkyOtpValueClearedDetail>} value-cleared - Fired when `reset()` clears the value.
+ * @fires {CustomEvent<SkyOtpValidationErrorDetail>} validation-error - Fired on each validation run.
+ * @method reset Clears all OTP slots and validation state.
+ * @method focusFirst Focuses the first OTP input slot.
+ *
+ * @csspart wrapper - The flex container wrapping the inputs row.
+ * @csspart input - An individual digit/char input element.
+ * @csspart error - The validation error text element.
+ *
+ * @Behavior
+ * - Updates per-slot UI immediately while emitting `value-changed` only on commit.
+ * - Supports paste-to-fill and keyboard navigation across slots.
+ * - Integrates with form control validity through `FormControlBase`.
+ *
+ * @example
+ * ```html
+ * <sky-otp length="6" masked show-errors></sky-otp>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-otp length="6" masked show-errors @value-changed="onOtpChange"></sky-otp>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-otp length="6" masked show-errors></sky-otp>;
+ * }
+ * ```
+ */
+export declare class SkyOtp extends FormControlBase {
+    length: number;
+    alphanumeric: boolean;
+    /** canonical value (unmasked) */
+    value: string;
+    validations: SkyOtpValidation[];
+    showErrors: boolean;
+    validationActive: boolean;
+    invalid: boolean;
+    private validationErrors;
+    masked: boolean;
+    /** Non-reactive display buffer (prevents Lit change-in-update warning) */
+    private displayValues;
+    private _lastCommitted;
+    static styles: import("lit").CSSResult;
+    constructor();
+    connectedCallback(): void;
+    firstUpdated(): void;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected getFormValue(): FormState;
+    protected setValueFromFormState(state: FormState): void;
+    protected getValidityAnchor(): HTMLElement | undefined;
+    protected isEmpty(): boolean;
+    protected getNativeControl(): HTMLElement | null;
+    /** PURE: do not mutate reactive state here */
+    protected validateForForm(): string;
+    protected onFormReset(): void;
+    private handleInput;
+    private commit;
+    focus(): void;
+    reset(): void;
+    focusFirst(): void;
+    private handleKeydown;
+    private handlePaste;
+    private ensureDisplayBuffer;
+    private syncDisplayFromValue;
+    private applyInvalidClass;
+    private computeValidationErrors;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-otp/sky-otp.js

@@ -0,0 +1,96 @@
+import{__decorate as t,__metadata as i}from"tslib";import{css as e,html as s}from"lit";import{property as a,state as r,customElement as l}from"lit/decorators.js";import{FormControlBase as o}from"../helper/internals/form-control-base.js";import{live as n}from"lit/directives/live.js";let h=class extends o{static{this.styles=e`
+    :host { display:block; font-family: var(--sky-font); position: relative; }
+
+    .otp-input {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: center;
+      gap: 8px;
+    }
+    .otp-input.shake {
+      animation: shake 0.3s ease-in-out;
+      animation-iteration-count: 1;
+    }
+
+    @keyframes shake {
+      0% { transform: translateX(0); }
+      25% { transform: translateX(-3px); }
+      50% { transform: translateX(3px); }
+      75% { transform: translateX(-3px); }
+      100% { transform: translateX(0); }
+    }
+
+    :dir(rtl) .otp-input { flex-direction: row-reverse; }
+
+    input {
+      width: 20px;
+      height: 20px;
+      text-align: center;
+      font-size: var(--sky-font-size-md);
+      border-radius: var(--sky-radius-primary);
+      font-family: var(--sky-font);
+      padding: 5px;
+      border: var(--sky-border-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      position: relative;
+      background: var(--sky-glass-primary);
+      color: var(--sky-text-primary);
+      transition: all 0.2s ease-in-out;
+      vertical-align: middle;
+    }
+
+    input.invalid {
+      box-shadow: 0 2px 12px
+        color-mix(in srgb, var(--sky-danger-primary) 30%, transparent);
+    }
+    input:focus {
+      outline: none;
+      box-shadow: 0 2px 12px
+        color-mix(in srgb, var(--sky-active-primary) 30%, transparent);
+    }
+
+    /* optional: if you prefer bullet masking even on type=text:
+       input[mask] { -webkit-text-security: disc; text-security: disc; }
+    */
+
+    .error-message {
+      position: absolute;
+      font-size: var(--sky-font-size-xs);
+      color: var(--sky-danger-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      pointer-events: none;
+      margin-left: 5px;
+      width: 100%;
+      text-align: start;
+    }
+    :dir(rtl) .error-message {
+      left: unset;
+      right: 0;
+      margin-right: 5px;
+      margin-left: unset;
+    }
+  `}constructor(){super(),this.length=6,this.alphanumeric=!1,this.value="",this.validations=[],this.showErrors=!1,this.validationActive=!1,this.invalid=!1,this.validationErrors=[],this.masked=!1,this.displayValues=[],this._lastCommitted="",this.addEventListener("focusout",t=>{if(!this.shadowRoot)return;const i=t.relatedTarget;!!i&&this.shadowRoot.contains(i)||this.commit()})}connectedCallback(){super.connectedCallback(),this.hasAttribute("tabindex")||(this.tabIndex=-1),this.ensureDisplayBuffer()}firstUpdated(){this.captureDefaultValue(this.value??""),this.syncDisplayFromValue(),this.syncFormValue(),this.syncValidity()}willUpdate(t){t.has("length")&&(this.ensureDisplayBuffer(),this.value=(this.value??"").slice(0,this.length),this.syncDisplayFromValue()),t.has("value")&&(this.value=(this.value??"").slice(0,this.length),this.syncDisplayFromValue(),this._lastCommitted=this.value)}getFormValue(){return!this.name||this.disabled?null:(this.value??"").slice(0,this.length)}setValueFromFormState(t){const i="string"==typeof t?t:"";this.value=(i??"").slice(0,this.length),this.syncDisplayFromValue(),this._lastCommitted=this.value}getValidityAnchor(){return this.shadowRoot?.querySelector("input")??void 0}isEmpty(){return(this.value??"").trim().length<this.length}getNativeControl(){return this.shadowRoot?.querySelector("input")}validateForForm(){const t=(this.value??"").slice(0,this.length);return this.computeValidationErrors(t)[0]??""}onFormReset(){this.value=(this.defaultValue??"").slice(0,this.length),this.syncDisplayFromValue(),this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this._lastCommitted=this.value,queueMicrotask(()=>this.applyInvalidClass(!1))}handleInput(t,i){if(this.disabled||this.readonly)return void t.preventDefault();this.ensureDisplayBuffer();const e=this.shadowRoot?.querySelectorAll("input"),s=t.target,a=t,r=(("string"==typeof a.data?a.data:s.value)??"").slice(-1),l=this.alphanumeric?/^[a-zA-Z0-9]$/:/^[0-9]$/;if(r&&!l.test(r))return s.value="",this.displayValues[i]="",void(this.value=this.displayValues.join("").slice(0,this.length));this.displayValues[i]=r,this.value=this.displayValues.join("").slice(0,this.length),e&&r&&i<this.length-1&&e[i+1]?.focus(),r&&this.displayValues.every(t=>t.length>0)&&this.commit()}commit(){if(this.disabled)return;const t=(this.value??"").slice(0,this.length);this.validationActive=!0;const i=this.computeValidationErrors(t);this.validationErrors=i,this.dispatchEvent(new CustomEvent("validation-error",{detail:{errors:[...i]},bubbles:!0,composed:!0})),this.applyInvalidClass(i.length>0),this.invalid=i.length>0,this.syncFormValue(),this.syncValidity(),t!==this._lastCommitted&&(this._lastCommitted=t,this.dispatchEvent(new CustomEvent("value-changed",{detail:{value:t,otp:t},bubbles:!0,composed:!0})))}focus(){const t=this.shadowRoot?.querySelector("input"),i=this.shadowRoot?.querySelector(".otp-input");t&&(t.focus(),i instanceof HTMLElement&&(i.classList.remove("shake"),i.offsetWidth,i.classList.add("shake")))}reset(){this.value="",this.validationErrors=[],this.validationActive=!1,this.invalid=!1,this.displayValues=Array.from({length:this.length},()=>""),this._lastCommitted="",queueMicrotask(()=>{const t=this.shadowRoot?.querySelectorAll("input");t?.forEach(t=>t.value=""),this.applyInvalidClass(!1)}),this.syncFormValue(),this.syncValidity(),this.dispatchEvent(new CustomEvent("value-cleared",{detail:{value:""},bubbles:!0,composed:!0}))}focusFirst(){const t=this.shadowRoot?.querySelector("input");t?.focus()}handleKeydown(t,i){const e=this.shadowRoot?.querySelectorAll("input");if(e)switch(t.key){case"Backspace":!e[i].value&&i>0?e[i-1].focus():(this.ensureDisplayBuffer(),this.displayValues[i]="",this.value=this.displayValues.join("").slice(0,this.length),e[i].value="");break;case"ArrowLeft":i>0&&e[i-1].focus();break;case"ArrowRight":i<this.length-1&&e[i+1].focus();break;case"Enter":this.commit()}}handlePaste(t){if(this.disabled||this.readonly)return void t.preventDefault();t.preventDefault();const i=t.clipboardData?.getData("text")||"",e=(this.alphanumeric?i.replace(/[^a-zA-Z0-9]/g,""):i.replace(/\D/g,"")).slice(0,this.length).split("");this.displayValues=Array.from({length:this.length},(t,i)=>e[i]??""),this.value=this.displayValues.join("").slice(0,this.length),this.commit();const s=this.shadowRoot?.querySelectorAll("input");if(s){const t=Array.from(s).find((t,i)=>!this.displayValues[i]);t?t.focus():s[this.length-1].focus()}}ensureDisplayBuffer(){if(this.displayValues.length!==this.length){const t=this.displayValues;this.displayValues=Array.from({length:this.length},(i,e)=>t[e]??"")}}syncDisplayFromValue(){this.ensureDisplayBuffer();const t=(this.value??"").slice(0,this.length);for(let i=0;i<this.length;i++)this.displayValues[i]=t[i]??""}applyInvalidClass(t){const i=this.shadowRoot?.querySelectorAll("input");i&&i.forEach(i=>i.classList.toggle("invalid",t))}computeValidationErrors(t){const i=(t??"").slice(0,this.length),e=[];if(!(i.length<this.length)&&Array.isArray(this.validations)&&this.validations.length)for(let t=0;t<this.validations.length;t++)try{const s=this.validations[t](i);!0!==s&&e.push("string"==typeof s?s:`Validation ${t} failed.`)}catch(i){e.push(`Error in validation ${t}: ${String(i?.message??i)}`)}return e}render(){const t=this.matches(":invalid")||this.validationActive&&this.validationErrors.length>0;return s`
+      <div class="otp-input" part="wrapper" role="group" aria-label="OTP input">
+        ${Array.from({length:this.length}).map((i,e)=>s`
+          <input
+            part="input"
+            .type=${this.masked?"password":"text"}
+            maxlength="1"
+            .value=${n(this.displayValues[e]??"")}
+            ?disabled=${this.disabled}
+            .readOnly=${this.readonly}
+            @input=${t=>this.handleInput(t,e)}
+            @keydown=${t=>this.handleKeydown(t,e)}
+            @paste=${t=>this.handlePaste(t)}
+            @change=${()=>this.commit()}
+            aria-label="OTP character ${e+1} of ${this.length}"
+            aria-invalid=${t?"true":"false"}
+          />
+        `)}
+      </div>
+
+      ${this.showErrors&&this.validationErrors.length>0&&this.validationActive?s`<div class="error-message" part="error">${this.validationErrors[0]}</div>`:""}
+    `}};t([a({type:Number}),i("design:type",Object)],h.prototype,"length",void 0),t([a({type:Boolean}),i("design:type",Object)],h.prototype,"alphanumeric",void 0),t([a({type:String}),i("design:type",Object)],h.prototype,"value",void 0),t([a({type:Array}),i("design:type",Array)],h.prototype,"validations",void 0),t([a({type:Boolean}),i("design:type",Object)],h.prototype,"showErrors",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Boolean)],h.prototype,"validationActive",void 0),t([a({type:Boolean,reflect:!0}),i("design:type",Boolean)],h.prototype,"invalid",void 0),t([r(),i("design:type",Array)],h.prototype,"validationErrors",void 0),t([a({type:Boolean}),i("design:type",Object)],h.prototype,"masked",void 0),h=t([l("sky-otp"),i("design:paramtypes",[])],h);export{h as SkyOtp};
+//# sourceMappingURL=sky-otp.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-otp.js","sources":["../../src/sky-otp/sky-otp.ts"],"sourcesContent":[null],"names":["SkyOtp","FormControlBase","this","styles","css","constructor","super","length","alphanumeric","value","validations","showErrors","validationActive","invalid","validationErrors","masked","displayValues","_lastCommitted","addEventListener","e","shadowRoot","related","relatedTarget","contains","commit","connectedCallback","hasAttribute","tabIndex","ensureDisplayBuffer","firstUpdated","captureDefaultValue","syncDisplayFromValue","syncFormValue","syncValidity","willUpdate","changed","has","slice","getFormValue","name","disabled","setValueFromFormState","state","s","getValidityAnchor","querySelector","undefined","isEmpty","trim","getNativeControl","validateForForm","canonical","computeValidationErrors","onFormReset","defaultValue","queueMicrotask","applyInvalidClass","handleInput","index","readonly","preventDefault","inputs","querySelectorAll","target","ie","char","data","isValidChar","test","join","focus","every","c","errors","dispatchEvent","CustomEvent","detail","bubbles","composed","otp","otpContainer","HTMLElement","classList","remove","offsetWidth","add","reset","Array","from","forEach","i","focusFirst","first","handleKeydown","key","handlePaste","clipboardData","getData","chars","replace","split","_","firstEmpty","find","old","v","isInvalid","el","toggle","vRaw","isArray","r","push","err","String","message","render","invalidNow","matches","html","map","live","__decorate","property","type","Number","prototype","Boolean","reflect","customElement"],"mappings":"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"}

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

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

package/dist/sky-overlay/index.js

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

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

@@ -0,0 +1,71 @@
+import { LitElement, PropertyValues } from "lit";
+/** Emitted when `open` toggles (methods or property), for `v-model:open`. */
+export type SkyOverlayOpenChangeDetail = {
+    open: boolean;
+};
+/**
+ * @element sky-overlay
+ *
+ * @summary Lightweight overlay layer with blur/tint styling for modal and blocking surfaces.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/overlay
+ *
+ * @uiVModel open open-change detail=open
+ *
+ * @slot - Default slot for overlay content (e.g., modal, drawer).
+ * @fires {CustomEvent<SkyOverlayOpenChangeDetail>} open-change - Fired when `open` changes (including via methods).
+ * @property {boolean} open - Controls overlay visibility.
+ * @method openOverlay Opens the overlay.
+ * @method closeOverlay Closes the overlay.
+ * @method toggle Toggles the `open` state.
+ *
+ * @Behavior
+ * - Renders as an absolutely positioned full-size layer within the containing block.
+ * - Uses opacity/visibility transitions for smooth show/hide.
+ * - Keeps slotted content visible above the dimmed/blurred overlay surface.
+ *
+ * @example
+ * ```html
+ * <div style="position: relative; height: 260px;">
+ *   <sky-overlay open>
+ *     <div style="color: white; padding: 20px;">Loading content...</div>
+ *   </sky-overlay>
+ * </div>
+ * ```
+ * ```vue
+ * <template>
+ *   <div style="position: relative; height: 260px;">
+ *     <sky-overlay :open="isOpen">
+ *       <div style="color: white; padding: 20px;">Loading content...</div>
+ *     </sky-overlay>
+ *   </div>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo({ isOpen }) {
+ *   return (
+ *     <div style={{ position: "relative", height: "260px" }}>
+ *       <sky-overlay open={isOpen}>
+ *         <div style={{ color: "white", padding: "20px" }}>Loading content...</div>
+ *       </sky-overlay>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyOverlay extends LitElement {
+    /**
+     * Whether the overlay is visible.
+     * Reflects to an attribute for styling purposes.
+     */
+    open: boolean;
+    static styles: import("lit").CSSResult;
+    toggle(): void;
+    openOverlay(): void;
+    closeOverlay(): void;
+    updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-overlay/sky-overlay.js

@@ -0,0 +1,26 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as i,css as o,html as r}from"lit";import{property as s,customElement as a}from"lit/decorators.js";let p=class extends i{constructor(){super(...arguments),this.open=!1}static{this.styles=o`
+    :host {
+      display: block;
+      position: absolute; /* Change from fixed to absolute */
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--sky-overlay-primary);
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      z-index: 10;
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.3s ease, visibility 0.3s ease;
+     
+    }
+
+    :host([open]) {
+      visibility: visible;
+      opacity: 1;
+    }
+  `}toggle(){this.open=!this.open}openOverlay(){this.open=!0}closeOverlay(){this.open=!1}updated(t){super.updated(t),t.has("open")&&this.dispatchEvent(new CustomEvent("open-change",{detail:{open:this.open},bubbles:!0,composed:!0}))}render(){return r` <slot></slot> `}};t([s({type:Boolean,reflect:!0}),e("design:type",Object)],p.prototype,"open",void 0),p=t([a("sky-overlay")],p);export{p as SkyOverlay};
+//# sourceMappingURL=sky-overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-overlay.js","sources":["../../src/sky-overlay/sky-overlay.ts"],"sourcesContent":[null],"names":["SkyOverlay","LitElement","constructor","this","open","styles","css","toggle","openOverlay","closeOverlay","updated","changed","super","has","dispatchEvent","CustomEvent","detail","bubbles","composed","render","html","__decorate","property","type","Boolean","reflect","prototype","customElement"],"mappings":"uKA4DO,IAAMA,EAAN,cAAyBC,EAAzB,WAAAC,uBAMLC,KAAAC,MAAO,CAwDT,QAtDkBD,KAAAE,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;GAwB1B,CAEF,MAAAC,GACEJ,KAAKC,MAAQD,KAAKC,IACpB,CAEA,WAAAI,GACEL,KAAKC,MAAO,CACd,CAEA,YAAAK,GACEN,KAAKC,MAAO,CACd,CAES,OAAAM,CAAQC,GACfC,MAAMF,QAAQC,GACVA,EAAQE,IAAI,SACdV,KAAKW,cACH,IAAIC,YAAwC,cAAe,CACzDC,OAAQ,CAAEZ,KAAMD,KAAKC,MACrBa,SAAS,EACTC,UAAU,IAIlB,CAES,MAAAC,GACP,OAAOC,CAAI,iBACb,GAvDAC,EAAA,CADCC,EAAS,CAAEC,KAAMC,QAASC,SAAS,6BACvBzB,EAAA0B,UAAA,eANF1B,EAAUqB,EAAA,CADtBM,EAAc,gBACF3B"}

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

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

package/dist/sky-pagination/index.js

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

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

@@ -0,0 +1,167 @@
+import { LitElement } from "lit";
+export type SkyPaginationVariant = "default" | "dropdown";
+export type SkyPaginationPageChangeDetail = {
+    currentPage: number;
+};
+/**
+ * @element sky-pagination
+ *
+ * @summary Pagination control with regular and dropdown variants, ellipsis jump, and loading overlay.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/pagination
+ * @dependency sky-icon
+ *
+ * @uiVModel currentPage page-change
+ *
+ * @csspart wrap - Outer wrapper for the component.
+ * @csspart overlay - Glass overlay over the pagination block when `loading` is true (not the progress bar).
+ * @csspart overlay-spinner - Spinner inside the overlay.
+ * @csspart block - Wrapper for the interactive block that's dimmed when loading.
+ * @csspart pagination - Regular-mode pagination container.
+ * @csspart arrow-button - The previous/next arrow buttons.
+ * @csspart page-button - A numbered page button.
+ * @csspart page-button--active - The active page button (state part).
+ * @csspart page-button--disabled - A disabled page button (state part).
+ * @csspart page-input - Number input displayed when editing an ellipsis.
+ * @csspart dropdown-pagination - Dropdown-mode container.
+ * @csspart dropdown-button - The button that shows current page / toggles the menu.
+ * @csspart dropdown-menu - The dropdown menu container with page items.
+ * @csspart progress-bar - Outer progress bar track (if `showProgressBar`).
+ * @csspart progress-bar-fill - Filled portion of the progress bar.
+ *
+ * @property {number} totalPages - Total number of pages.
+ * @property {number} currentPage - Current selected page (1-based).
+ * @property {number[]} disabledPages - Disabled page numbers.
+ * @property {boolean} loading - Shows blocking loading overlay.
+ * @property {boolean} showProgressBar - Shows progress bar under controls.
+ * @property {SkyPaginationVariant} variant - Pagination UI variant.
+ * @property {number | null} ellipsisEditIndex - Active ellipsis edit index in regular mode.
+ * @property {string} ellipsisInputValue - Current value for ellipsis jump input.
+ * @property {number} maxVisiblePage - Maximum visible page buttons in regular mode.
+ *
+ * @fires {CustomEvent<SkyPaginationPageChangeDetail>} page-change - Fired when the current page changes.
+ * @method nextPage Navigates to next available page.
+ * @method prevPage Navigates to previous available page.
+ * @method setPage Navigates to a specific page.
+ *
+ * @Behavior
+ * - Supports regular button mode and compact dropdown mode.
+ * - Prevents interaction while `loading` is true.
+ * - Supports editable ellipsis jump for large page ranges.
+ *
+ * @example
+ * ```html
+ * <sky-pagination total-pages="10" current-page="3" show-progress-bar max-visible-page="7"></sky-pagination>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-pagination
+ *     :total-pages="20"
+ *     :current-page="5"
+ *     variant="dropdown"
+ *     :disabled-pages="[2, 3, 4]"
+ *     @page-change="onPageChange"
+ *   ></sky-pagination>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-pagination total-pages={10} current-page={3} show-progress-bar max-visible-page={7}></sky-pagination>;
+ * }
+ * ```
+ */
+export declare class SkyPagination extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    totalPages: number;
+    currentPage: number;
+    disabledPages: number[];
+    loading: boolean;
+    showProgressBar: boolean;
+    variant: SkyPaginationVariant;
+    ellipsisEditIndex: number | null;
+    ellipsisInputValue: string;
+    maxVisiblePage: number;
+    private dropdownOpen;
+    private dropdownBtn?;
+    private dropdownMenu?;
+    private dropdownPop;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): void;
+    /**
+     * Called whenever the component is updated.
+     *
+     * This override checks if the `ellipsisEditIndex` property has changed and is not null.
+     * If so, it attempts to find an input element with the class `.page-input` within the component's render root,
+     * and if found, focuses and selects the input for user interaction.
+     *
+     * @param changed - A map containing the names of properties that have changed and their previous values.
+     */
+    updated(changed: Map<string | number | symbol, unknown>): void;
+    private toggleDropdown;
+    /**
+     * Determines whether a pagination control should be disabled.
+     *
+     * @param page - The page number to check. If omitted, only the loading state is considered.
+     * @returns `true` if the pagination is currently loading or the specified page is in the list of disabled pages; otherwise, `false`.
+     */
+    private _isDisabled;
+    /**
+     * Returns the next available page number in the given direction, skipping any disabled pages.
+     *
+     * @param direction - The direction to move in the pagination. Use `1` for next and `-1` for previous.
+     * @returns The next available page number if found; otherwise, returns the current page number if no available page exists in the given direction.
+     */
+    getNextAvailablePage(direction: number): number;
+    /**
+     * Handles the click event for pagination arrow buttons.
+     *
+     * Determines the next available page based on the direction provided,
+     * and navigates to that page unless the component is currently loading.
+     *
+     * @param direction - The direction to move in pagination (e.g., -1 for previous, 1 for next).
+     * @param event - (Optional) The event object associated with the click.
+     */
+    private handleArrowClick;
+    /**
+     * Navigates to the specified page if it is within the valid range and not disabled.
+     *
+     * - Prevents navigation if the component is currently loading.
+     * - Stops event propagation if an event is provided.
+     * - Updates the current page if the target page is valid and not in the list of disabled pages.
+     * - Closes the dropdown menu after a short delay.
+     * - Dispatches a "page-change" custom event with the new current page in the event detail.
+     *
+     * @param page - The page number to navigate to.
+     * @param event - (Optional) The event that triggered the page change, used to stop propagation.
+     */
+    goToPage(page: number, event?: Event): void;
+    nextPage(): void;
+    prevPage(): void;
+    setPage(page: number): void;
+    /**
+     * Handles keyboard events for the ellipsis input in pagination.
+     *
+     * - On "Enter" key: Validates the input value as a page number, checks if it is within the valid range
+     *   and not in the list of disabled pages, and navigates to that page if valid. Resets the ellipsis input state.
+     * - On "Escape" key: Cancels the edit and resets the ellipsis input state.
+     *
+     * @param e - The keyboard event triggered by user input.
+     */
+    private handleEllipsisInputKey;
+    /**
+     * Handles the blur event for the ellipsis input in the pagination component.
+     *
+     * This method is triggered when the ellipsis input loses focus. It attempts to parse the input value as a page number,
+     * validates it against the allowed page range and disabled pages, and navigates to the page if valid.
+     * Regardless of validity, it resets the ellipsis edit state and clears the input value.
+     *
+     * @param event - The blur event object, if provided. Its propagation is stopped to prevent unwanted side effects.
+     */
+    private handleEllipsisBlur;
+    private renderLoadingOverlay;
+    private renderRegularPagination;
+    render(): import("lit-html").TemplateResult<1>;
+}