@sky.ui/core 0.0.1

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

@@ -0,0 +1,29 @@
+import{__decorate as t,__metadata as i}from"tslib";import{LitElement as e,css as s,html as o}from"lit";import{property as d,state as r,customElement as p}from"lit/decorators.js";import{styleMap as n}from"lit/directives/style-map.js";let a=class extends e{constructor(){super(...arguments),this.src="",this.alt="Image",this.width="auto",this.height="auto",this.aspectRatio=null,this.borderRadius="0",this.boxShadow="none",this.objectFit="cover",this.objectPosition="center",this.srcset="",this.sizes="",this.autoSizes=!1,this._computedSizes="",this.loading="lazy",this.decoding="async",this._sizesRafId=null,this._updateSizes=()=>{null==this._sizesRafId&&(this._sizesRafId=requestAnimationFrame(()=>{this._sizesRafId=null;const t=Math.ceil(this.getBoundingClientRect().width);t>0&&(this._computedSizes=`${t}px`)}))}}static{this.styles=s`
+    :host {
+      display: inline-block;
+    }
+
+    img {
+      display: block;
+      max-width: 100%; /* keeps it responsive if width="auto" */
+    }
+  `}firstUpdated(){this.autoSizes&&(this._ro=new ResizeObserver(this._updateSizes),this._ro.observe(this),this._updateSizes())}disconnectedCallback(){super.disconnectedCallback(),this._ro?.disconnect(),null!=this._sizesRafId&&(cancelAnimationFrame(this._sizesRafId),this._sizesRafId=null)}render(){const t=this.autoSizes?this._computedSizes:this.sizes||"",i=null!=this.src&&""!==String(this.src).trim(),e={width:this.width,height:this.height,borderRadius:this.borderRadius,boxShadow:this.boxShadow,objectFit:this.objectFit,objectPosition:this.objectPosition,aspectRatio:this.aspectRatio??"auto"};return i?o`
+      <img
+        src=${this.src}
+        alt=${this.alt}
+        srcset=${this.srcset}
+        sizes=${t}
+        loading=${this.loading}
+        decoding=${this.decoding}
+        style=${n(e)}
+        part="img"
+      />
+    `:o`
+        <div
+          part="img"
+          style=${n({...e,display:"block",background:"var(--sky-bg-tertiary, rgba(0,0,0,0.04))"})}
+          aria-label=${this.alt}
+          role="img"
+        ></div>
+      `}};t([d({type:String}),i("design:type",Object)],a.prototype,"src",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"alt",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"width",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"height",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"aspectRatio",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"borderRadius",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"boxShadow",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"objectFit",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"objectPosition",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"srcset",void 0),t([d({type:String}),i("design:type",Object)],a.prototype,"sizes",void 0),t([d({type:Boolean}),i("design:type",Object)],a.prototype,"autoSizes",void 0),t([r(),i("design:type",Object)],a.prototype,"_computedSizes",void 0),t([d({type:String}),i("design:type",String)],a.prototype,"loading",void 0),t([d({type:String}),i("design:type",String)],a.prototype,"decoding",void 0),a=t([p("sky-image")],a);export{a as SkyImage};
+//# sourceMappingURL=sky-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-image.js","sources":["../../src/sky-image/sky-image.ts"],"sourcesContent":[null],"names":["SkyImage","LitElement","constructor","this","src","alt","width","height","aspectRatio","borderRadius","boxShadow","objectFit","objectPosition","srcset","sizes","autoSizes","_computedSizes","loading","decoding","_sizesRafId","_updateSizes","requestAnimationFrame","w","Math","ceil","getBoundingClientRect","styles","css","firstUpdated","_ro","ResizeObserver","observe","disconnectedCallback","super","disconnect","cancelAnimationFrame","render","sizesAttr","hasSrc","String","trim","styleVars","html","styleMap","display","background","__decorate","property","type","prototype","Boolean","state","customElement"],"mappings":"yOAmFO,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBACuBC,KAAAC,IAAM,GACND,KAAAE,IAAM,QACNF,KAAAG,MAAQ,OACRH,KAAAI,OAAS,OACTJ,KAAAK,YAA6B,KAC7BL,KAAAM,aAAe,IACfN,KAAAO,UAAY,OACZP,KAAAQ,UAAY,QACZR,KAAAS,eAAiB,SAEjBT,KAAAU,OAAS,GACTV,KAAAW,MAAQ,GAEPX,KAAAY,WAAY,EACxBZ,KAAAa,eAAiB,GAENb,KAAAc,QAA2B,OAC3Bd,KAAAe,SAA6B,QAcjDf,KAAAgB,YAA6B,KAC7BhB,KAAAiB,aAAe,KACG,MAApBjB,KAAKgB,cACThB,KAAKgB,YAAcE,sBAAsB,KACvClB,KAAKgB,YAAc,KACnB,MAAMG,EAAIC,KAAKC,KAAKrB,KAAKsB,wBAAwBnB,OAC7CgB,EAAI,IAAGnB,KAAKa,eAAiB,GAAGM,UA2D1C,QA7EkBnB,KAAAuB,OAASC,CAAG;;;;;;;;;GAS1B,CAaO,YAAAC,GACHzB,KAAKY,YACPZ,KAAK0B,IAAM,IAAIC,eAAe3B,KAAKiB,cACnCjB,KAAK0B,IAAIE,QAAQ5B,MACjBA,KAAKiB,eAET,CAES,oBAAAY,GACPC,MAAMD,uBACN7B,KAAK0B,KAAKK,aACc,MAApB/B,KAAKgB,cACPgB,qBAAqBhC,KAAKgB,aAC1BhB,KAAKgB,YAAc,KAEvB,CAES,MAAAiB,GACP,MAAMC,EAAYlC,KAAKY,UAAYZ,KAAKa,eAAiBb,KAAKW,OAAS,GACjEwB,EAAqB,MAAZnC,KAAKC,KAA2C,KAA5BmC,OAAOpC,KAAKC,KAAKoC,OAE9CC,EAAY,CAChBnC,MAAOH,KAAKG,MACZC,OAAQJ,KAAKI,OACbE,aAAcN,KAAKM,aACnBC,UAAWP,KAAKO,UAChBC,UAAWR,KAAKQ,UAChBC,eAAgBT,KAAKS,eACrBJ,YAAaL,KAAKK,aAAe,QAGnC,OAAK8B,EAWEI,CAAI;;cAEDvC,KAAKC;cACLD,KAAKE;iBACFF,KAAKU;gBACNwB;kBACElC,KAAKc;mBACJd,KAAKe;gBACRyB,EAASF;;;MAlBZC,CAAI;;;kBAGCC,EAAS,IAAKF,EAAWG,QAAS,QAASC,WAAY;uBAClD1C,KAAKE;;;OAkB1B,GA/F4ByC,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAAmBvC,EAAAiD,UAAA,cACTH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAAwBvC,EAAAiD,UAAA,cACdH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAAyBvC,EAAAiD,UAAA,gBACfH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA0BvC,EAAAiD,UAAA,iBAChBH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA4CvC,EAAAiD,UAAA,sBAClCH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA6BvC,EAAAiD,UAAA,uBACnBH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA6BvC,EAAAiD,UAAA,oBACnBH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA8BvC,EAAAiD,UAAA,oBACpBH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAAoCvC,EAAAiD,UAAA,yBAE1BH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAAsBvC,EAAAiD,UAAA,iBACZH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAAqBvC,EAAAiD,UAAA,gBAEVH,EAAA,CAA5BC,EAAS,CAAEC,KAAME,mCAA6BlD,EAAAiD,UAAA,oBAC9BH,EAAA,CAAhBK,6BAAoCnD,EAAAiD,UAAA,yBAETH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA4CvC,EAAAiD,UAAA,kBAClCH,EAAA,CAA3BC,EAAS,CAAEC,KAAMT,kCAA+CvC,EAAAiD,UAAA,mBAlBtDjD,EAAQ8C,EAAA,CADpBM,EAAc,cACFpD"}

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

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

package/dist/sky-input/index.js

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

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

@@ -0,0 +1,345 @@
+import { FormControlBase } from "../helper/internals/form-control-base";
+export type SkyInputValue = string | number | File[] | null;
+export type SkyInputType = string;
+export type SkyInputErrorDisplayMode = "none" | "single" | "all";
+export type SkyInputIconPosition = "left" | "right";
+export type SkyInputValidation = (value: string | File[]) => true | string;
+export type SkyInputValueChangedDetail = {
+    value: string | number;
+};
+export type SkyInputValueClearedDetail = {
+    value: string | number;
+};
+export type SkyInputFileSelectedDetail = {
+    files: File[];
+    fileName: string;
+    totalSize: number;
+    fileCount: number;
+};
+export type SkyInputValidationErrorDetail = {
+    errors: string[];
+};
+export type SkyInputIconClickDetail = {
+    position: SkyInputIconPosition;
+    eventType: string | null;
+    eventData: Event | null;
+};
+/**
+ * @element sky-input
+ *
+ * @summary Versatile form input supporting text, password, number, textarea, and file workflows.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/input
+ * @dependency sky-icon
+ *
+ * @uiVModel value value-changed
+ *
+ * @slot icon-left - Optional icon/content placed in the left slot.
+ * @slot icon-right - Optional icon/content placed in the right slot.
+ * @property {SkyInputValue} value - Current input value.
+ * @property {string} placeholder - Placeholder text.
+ * @property {string} label - Label text shown above the input.
+ * @property {SkyInputType} type - Input type (`text`, `password`, `number`, `textarea`, `file`, etc.).
+ * @property {string} suffix - Optional suffix label fragment.
+ * @property {string} prefix - Optional prefix label fragment.
+ * @property {string} prefixColor - Prefix color override.
+ * @property {string} suffixColor - Suffix color override.
+ * @property {string} color - Accent color token/value.
+ * @property {SkyInputValidation[]} validations - Validation functions.
+ * @property {boolean} compact - Compact display mode.
+ * @property {boolean} loading - Loading state.
+ * @property {boolean} showErrors - Enables error rendering.
+ * @property {boolean} clearable - Enables clear button.
+ * @property {SkyInputErrorDisplayMode} errorDisplayMode - Error rendering mode.
+ * @property {boolean} showNumberButtons - Enables number increment/decrement controls.
+ * @property {boolean} showPasswordToggle - Enables password visibility toggle.
+ * @property {string} passwordVisibleIcon - Icon used when password is visible.
+ * @property {string} passwordHiddenIcon - Icon used when password is hidden.
+ *
+ * @fires {CustomEvent<SkyInputValueChangedDetail>} value-changed - Fired when value changes.
+ * @fires {CustomEvent<SkyInputValueClearedDetail>} value-cleared - Fired after clear action.
+ * @fires {CustomEvent<SkyInputFileSelectedDetail>} file-selected - Fired after file selection changes.
+ * @fires {CustomEvent<SkyInputValidationErrorDetail>} validation-error - Fired after validations run.
+ * @fires {CustomEvent<SkyInputIconClickDetail>} left-icon-click - Fired when left icon slot is clicked.
+ * @fires {CustomEvent<SkyInputIconClickDetail>} right-icon-click - Fired when right icon slot is clicked.
+ *
+ * @method validateInput Runs configured validations and updates invalid state.
+ * @method handleClear Clears value and emits corresponding events.
+ * @method formatFileSize Formats byte size for UI display.
+ * @method focusInput Focuses the underlying native input or textarea.
+ *
+ * @csspart input-container - The outer container wrapping label and input wrapper.
+ * @csspart label - The label element above the input.
+ * @csspart input-wrapper - The wrapper around input/textarea and icons.
+ * @csspart icon-slot - Base class for left/right icon slots.
+ * @csspart icon-slot-left - Left icon slot.
+ * @csspart icon-slot-right - Right icon slot.
+ * @csspart clear-button - The clear/reset button.
+ * @csspart toggle-password - The toggle icon for password visibility.
+ * @csspart loading-indicator - The spinner shown when loading.
+ * @csspart error-list - UL element containing validation errors.
+ * @csspart error - Individual error message.
+ * @csspart file-info - File count and size info below the file input.
+ * @csspart custom-file-label - Label for file inputs when styled.
+ *
+ * @Behavior
+ * - Extends `FormControlBase` for automatic form association and validation integration
+ * - Supports all standard HTML input types with enhanced styling and functionality
+ * - File inputs with multi-file support, preview, and size tracking
+ * - Automatic validation integration with parent forms via `sky-form`
+ *
+ * - **none**: No error messages displayed
+ * - **single**: Show only the first error message
+ * - **all**: Show all validation error messages
+ *
+ * @example
+ * ```html
+ * <sky-input
+ *   label="Password"
+ *   type="password"
+ *   placeholder="Enter your password"
+ *   clearable
+ *   show-password-toggle
+ *   required
+ * >
+ *   <sky-icon slot="icon-left" icon="ion:lock-closed"></sky-icon>
+ * </sky-input>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-input label="Password" type="password" clearable show-password-toggle required>
+ *     <sky-icon slot="icon-left" icon="ion:lock-closed"></sky-icon>
+ *   </sky-input>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-input label="Password" type="password" clearable show-password-toggle required>
+ *       <sky-icon slot="icon-left" icon="ion:lock-closed"></sky-icon>
+ *     </sky-input>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyInput extends FormControlBase {
+    static dependencies: Record<string, CustomElementConstructor>;
+    value: SkyInputValue;
+    placeholder: string;
+    label: string;
+    type: SkyInputType;
+    suffix: string;
+    prefix: string;
+    prefixColor: string;
+    suffixColor: string;
+    color: string;
+    validations: SkyInputValidation[];
+    compact: boolean;
+    loading: boolean;
+    showErrors: boolean;
+    clearable: boolean;
+    errorDisplayMode: SkyInputErrorDisplayMode;
+    required: boolean;
+    step: string | null;
+    min: string | null;
+    max: string | null;
+    autocapitalize: string;
+    autocomplete: string;
+    spellcheck: boolean;
+    dir: string;
+    rows: number;
+    resizable: string;
+    accept: string;
+    multiple: boolean;
+    inputmode: string | null;
+    enterkeyhint: string | null;
+    pattern: string | null;
+    minlength: number | null;
+    maxlength: number | null;
+    list: string | null;
+    size: number | null;
+    cols: number | null;
+    autofocus: boolean;
+    capture: boolean;
+    inputRole: string | null;
+    ariaLabel: string | null;
+    ariaLabelledby: string | null;
+    ariaDescribedby: string | null;
+    showNumberButtons: boolean;
+    showPasswordToggle: boolean;
+    passwordVisibleIcon: string;
+    passwordHiddenIcon: string;
+    validationActive: boolean;
+    invalid: boolean;
+    variant: string;
+    private selectedFileName;
+    private selectedFiles;
+    private focused;
+    private validationStatus;
+    private validationErrors;
+    private typingStarted;
+    private autofillIconSlot;
+    private showPassword;
+    private totalFileSize;
+    private selectedFileCount;
+    private filePreview;
+    private inputWrapperEl;
+    private nativeInputEl;
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    connectedCallback(): void;
+    firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /** @protected */
+    protected getFormValue(): string | File | FormData | null;
+    /** @protected */
+    protected setValueFromFormState(state: string | File | FormData | null): void;
+    /** @protected */
+    protected getValidityAnchor(): HTMLElement | undefined;
+    /** @protected */
+    protected isEmpty(): boolean;
+    /** @protected */
+    protected getCustomErrorMessage(): string;
+    /** @protected */
+    protected getNativeControl(): HTMLElement | null;
+    /** @protected */
+    protected onNativeValueMutated(native: any): void;
+    /**
+     * Resets the input field to its initial state.
+     * @public
+     */
+    reset(): void;
+    /** @private */
+    private get nativeRequiredMessage();
+    /** @private */
+    private getEmittedValue;
+    /**
+     * Clears the input value and resets typing state.
+     * @public
+     */
+    handleClear(): void;
+    /**
+     * Handles the `change` event triggered by the file input element.
+     * @param {Event} event - The event object generated by the file input element when files are selected.
+     * @public
+     */
+    handleFileChange(event: Event): void;
+    /**
+     * Handles the keydown event for the input component.
+     * @param event - The keyboard event triggered by the user.
+     * @private
+     */
+    private handleKeydown;
+    /**
+     * Gets the current file preview.
+     * @returns The preview of the file, as stored in `filePreview`.
+     * @public
+     */
+    get preview(): string | ArrayBuffer | null;
+    /**
+     * Handles the input event for the input field.
+     * @param {Event} event - The input event triggered by user interaction.
+     * @public
+     */
+    handleInput(event: Event): void;
+    /**
+     * Handles the focus event for the input field.
+     * @public
+     */
+    handleFocus(event: Event): void;
+    /** @protected */
+    protected onFormReset(): void;
+    /**
+     * Handles the blur event for the input field.
+     * @public
+     */
+    handleBlur(event: Event): void;
+    /** @protected */
+    protected validateForForm(): string;
+    /**
+     * Validates the input value against the configured validation rules.
+     * @returns {boolean} True if validation passes, false otherwise.
+     * @public
+     */
+    validateInput(): boolean;
+    /**
+     * Retrieves validation error messages based on the configured error display mode.
+     * @returns {Array} - An array of error messages to display.
+     * @private
+     */
+    private getErrorMessages;
+    /**
+     * Handles click events for the left or right icon slots.
+     * @param {String} position - The position of the icon ("left" or "right").
+     * @param {Event|null} event - The original event triggered by the click (optional).
+     * @public
+     */
+    handleIconClick(position: "left" | "right", event?: Event | null): void;
+    /**
+     * Formats a file size in bytes into a human-readable string.
+     * @param {number} bytes - The file size in bytes.
+     * @returns {string} - The formatted file size string.
+     * @public
+     */
+    formatFileSize(bytes: number): string;
+    /**
+     * Increments the input value by the specified step, respecting min/max constraints.
+     * @private
+     */
+    private incrementValue;
+    /**
+     * Decrements the input value by the specified step, respecting min/max constraints.
+     * @private
+     */
+    private decrementValue;
+    /**
+     * Renders validation error messages if applicable.
+     * @returns {TemplateResult|null} - The rendered error messages or null.
+     * @private
+     */
+    private renderValidationErrors;
+    /**
+     * Toggles the visibility of the password input.
+     * @public
+     */
+    togglePasswordVisibility(): void;
+    focusInput(): void;
+    /**
+     * Handles click events on the input wrapper.
+     * @param {Event} event - The original click event.
+     * @private
+     */
+    private handleWrapperClick;
+    /** @private */
+    private get isInvalid();
+    /** @private */
+    private get describedById();
+    /**
+     * Refocuses the input element.
+     * @private
+     */
+    private refocusInput;
+    /**
+     * Keeps the input focused when interacting with related controls.
+     * @param {Event} e - The original event.
+     * @private
+     */
+    private keepInputFocused;
+    /**
+     * Triggers the native dropdown for date/time/file inputs.
+     * @private
+     */
+    private triggerNativeDropdown;
+    render(): import("lit-html").TemplateResult<1>;
+}