@mhmo91/schmancy 0.4.20 → 0.4.22

package/types/src/input/input.d.ts

@@ -16,35 +16,33 @@ type EventDetails = {
 export type SchmancyInputInputEvent = CustomEvent<EventDetails>;
 export type SchmancyInputChangeEvent = CustomEvent<EventDetails>;
 export type SchmancyInputEnterEvent = CustomEvent<EventDetails>;
-declare const SchmancyInput_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Size variants for the input.
+ * - sm: Small, compact input (40px height)
+ * - md: Medium input (50px height, default)
+ * - lg: Large, spacious input (60px height)
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+declare const SchmancyInput_base: import("@mixins/index").Constructor<import("@mixins/index").IFormFieldMixin> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * Enhanced version of the SchmancyInput component with improved form integration
+ * and compatibility with legacy API.
+ *
+ * This component uses the native form association API and maintains parity with
+ * native input behaviors while providing a stylish, accessible interface.
+ */
 export default class SchmancyInput extends SchmancyInput_base {
-    /** If user does NOT set `id`, we'll autogenerate one. */
+    /** Auto-incrementing counter for generating unique IDs */
     static _idCounter: number;
-    id: string;
-    /**
-     * The label for the control. If populated, we render a `<label for="...">`.
-     * If empty, we add an `aria-label` to the <input> for better screenreader support.
-     */
-    label: string;
+    /** Override value to be string only for input element */
+    value: string;
     /**
      * The type of input. (e.g. 'text', 'password', 'email', etc.)
      */
     type: HTMLInputElement['type'];
-    /**
-     * Name attribute (for form submissions). By default, a unique fallback.
-     */
-    name: string;
     placeholder: string;
-    /** Current value of the input. */
-    value: string;
     /** Pattern validation attribute. */
     pattern?: string;
-    /** Whether the control is required for form validation. */
-    required: boolean;
-    /** Whether the control is disabled. */
-    disabled: boolean;
-    /** Whether the input is read-only. */
-    readonly: boolean;
     /** If true, we visually show a pointer cursor even if readOnly. */
     clickable: boolean;
     /** Whether browser spellcheck is enabled. */
@@ -70,47 +68,133 @@ export default class SchmancyInput extends SchmancyInput_base {
      */
     tabIndex: number;
     /**
-     * A small hint text or error message to display under the input.
+     * The size of the input.
+     * - 'sm': Small, compact size
+     * - 'md': Medium size (default)
+     * - 'lg': Large size
      */
-    hint?: string;
+    size: InputSize;
     /**
-     * If true, we style the input as an error state, and possibly display
-     * the hint as an error message.
+     * Controls when validation should show.
+     * - 'always' - Always show validation
+     * - 'touched' - Only show after field has been focused and then blurred
+     * - 'dirty' - Only show after value has changed
+     * - 'submitted' - Only show after form submission
      */
-    error: boolean;
+    validateOn: 'always' | 'touched' | 'dirty' | 'submitted';
+    /**
+     * For datalist support
+     */
+    list?: string;
     private inputElement;
     private inputRef;
-    static formAssociated: boolean;
+    /**
+     * For integration with browser's autofill support
+     */
+    private isAutofilled;
+    /**
+     * Track user interaction state for validation
+     */
+    private touched;
+    private dirty;
+    private submitted;
+    /**
+     * Store the default value for reset behavior
+     */
+    private defaultValue;
     protected static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
         serializable?: boolean;
         slotAssignment?: SlotAssignmentMode;
     };
-    private internals?;
-    constructor();
+    private formResetObserver?;
     /**
      * If user did not provide an ID, auto-generate one so <label for="...">
      * and various aria-* attributes can reference it.
      */
     protected willUpdate(changedProps: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    /** The form this element is associated with, if any. */
-    get form(): HTMLFormElement;
     protected updated(changedProps: Map<string, unknown>): void;
     /**
-     * Native form methods:
-     * - checkValidity()
-     * - reportValidity()
-     * - setCustomValidity()
+     * Connect to the closest form element and set up form integration
+     */
+    connectedCallback(): void;
+    /**
+     * Set up form integration with ElementInternals
+     */
+    private setupFormIntegration;
+    /**
+     * Set up external label association for native HTML label support
+     */
+    private setupExternalLabelAssociation;
+    disconnectedCallback(): void;
+    /**
+     * Reset the input to its default state
+     */
+    private resetToDefault;
+    /**
+     * Determines if validation errors should be shown based on current state
+     * and validation strategy
+     */
+    private shouldShowValidation;
+    /**
+     * Validate input based on required, pattern, etc.
+     * This mimics native validation behavior
+     */
+    private validateInput;
+    /**
+     * Check validity without showing validation UI
      */
     checkValidity(): boolean;
+    /**
+     * Show validation UI and check validity
+     */
     reportValidity(): boolean;
+    /**
+     * Set a custom validation error message
+     */
     setCustomValidity(message: string): void;
     firstUpdated(): void;
+    /**
+     * Set up input event handling for value changes
+     */
+    private setupInputEvents;
+    /**
+     * Set up focus/blur event handling
+     */
+    private setupFocusBlurEvents;
+    /**
+     * Set up autofill detection
+     */
+    private setupAutofillDetection;
+    /**
+     * Set up enter key event handling
+     */
+    private setupEnterKeyEvents;
     /** Selects all text within the input. */
     select(): void;
     /** Returns the native validity state of the inner <input>. */
     getValidity(): ValidityState | undefined;
+    /**
+     * Sets the selection range. Mirrors native input.setSelectionRange
+     */
+    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
+    /**
+     * Returns the selected text within the input (start position)
+     */
+    get selectionStart(): number | null;
+    /**
+     * Returns the selected text within the input (end position)
+     */
+    get selectionEnd(): number | null;
+    /**
+     * Returns the direction of selection
+     */
+    get selectionDirection(): 'forward' | 'backward' | 'none' | null;
+    /**
+     * Sets the range of text to be selected.
+     */
+    setRangeText(replacement: string, start?: number, end?: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): void;
     /**
      * Override to forward focus to the internal <input>.
      * Also dispatch a 'focus' event for external listeners.

package/types/src/progress/index.d.ts

@@ -0,0 +1 @@
+export * from './progress';

package/types/src/progress/progress.d.ts

@@ -0,0 +1,17 @@
+declare const SchmancyProgress_base: import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+export default class SchmancyProgress extends SchmancyProgress_base {
+    value: number;
+    max: number;
+    indeterminate: boolean;
+    size: 'sm' | 'md' | 'lg';
+    color: 'primary' | 'secondary' | 'tertiary' | 'error' | 'success';
+    glass: boolean;
+    private get percentage();
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'schmancy-progress': SchmancyProgress;
+    }
+}
+export {};

package/types/src/radio-group/radio-button.d.ts

@@ -1,4 +1,4 @@
-declare const RadioButton_base: import("@mixins/index").Constructor<import("../../mixins/formField.mixin").IFormFieldMixin> & import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+declare const RadioButton_base: import("@mixins/index").Constructor<import("@mixins/index").IFormFieldMixin> & import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export declare class RadioButton extends RadioButton_base {
     value: string;
     checked: boolean;

package/types/src/radio-group/radio-group.d.ts

@@ -5,7 +5,7 @@ export type SchmancyRadioGroupOption = {
 export type SchmancyRadioGroupChangeEvent = CustomEvent<{
     value: string;
 }>;
-declare const RadioGroup_base: import("@mixins/index").Constructor<import("../../mixins/formField.mixin").IFormFieldMixin> & import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+declare const RadioGroup_base: import("@mixins/index").Constructor<import("@mixins/index").IFormFieldMixin> & import("@mixins/index").Constructor<CustomElementConstructor> & import("@mixins/index").Constructor<import("@mixins/index").ITailwindElementMixin> & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export declare class RadioGroup extends RadioGroup_base {
     label: string;
     name: string;

package/dist/input-DcWJTrr9.cjs

@@ -1,111 +0,0 @@
-"use strict";const h=require("lit"),i=require("lit/decorators.js"),d=require("lit/directives/if-defined.js"),y=require("lit/directives/ref.js"),b=require("lit/directives/when.js"),r=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const E=require("./tailwind.mixin-DNME2oUL.cjs"),v=require("./ripple-C2BHbhcS.cjs"),f=require("./theme.interface-Xg5Zi46a.cjs"),w=require("./formField.mixin-BrHllh45.cjs"),g="/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */:host{width:100%;min-width:calc(var(--spacing,.25rem)*0);box-sizing:border-box;max-width:100%;display:block}.date-input-container{width:100%;min-width:0;width:100%!important;max-width:100%!important}input{appearance:none;border-radius:8px;width:-webkit-fill-available;font-size:16px}input[type=number]::-webkit-inner-spin-button{appearance:none;margin:calc(var(--spacing,.25rem)*0)}input[type=number]::-webkit-outer-spin-button{appearance:none;margin:calc(var(--spacing,.25rem)*0)}input[type=number]{appearance:textfield}input:-webkit-autofill{animation-name:onAutoFillStart;-webkit-box-shadow:0 0 0 30px var(--schmancy-sys-color-surface-highest)inset!important;-webkit-text-fill-color:var(--schmancy-sys-color-surface-on)!important}input:autofill{background-color:var(--schmancy-sys-color-surface-highest)!important;color:var(--schmancy-sys-color-surface-on)!important}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;width:100%;line-height:inherit;border-radius:8px;min-width:100%;max-width:100%;margin:0;display:block;overflow:hidden;border-radius:8px!important;width:100%!important}input::-webkit-datetime-edit{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit-fields-wrapper{align-items:center;width:100%;height:100%;margin:0;padding:0;display:flex}input::-webkit-datetime-edit{flex:1;width:100%}input::-webkit-datetime-edit-fields-wrapper{flex:1;justify-content:space-between;width:100%}input::-webkit-datetime-edit-text{align-items:center;display:flex}input::-webkit-datetime-edit-day-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-month-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-year-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-hour-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-minute-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-second-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-millisecond-field{flex-shrink:0;padding:0 2px}input::-webkit-datetime-edit-meridiem-field{flex-shrink:0;padding:0 2px}input[type=date]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=time]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=month]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}input[type=week]::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}@-moz-document url-prefix(){input[type=date],input[type=datetime-local],input[type=time]{min-height:inherit}}@supports (-webkit-touch-callout:none){input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{appearance:none;border-radius:0;width:-webkit-fill-available!important;width:fill-available!important;padding-left:12px!important;padding-right:12px!important}input::-webkit-datetime-edit{width:100%!important;padding-left:0!important;padding-right:0!important}input::-webkit-datetime-edit-fields-wrapper{width:100%!important;margin:0!important;padding:0!important}}";var k=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(t,e,a,p)=>{for(var c,u=p>1?void 0:p?x(e,a):e,m=t.length-1;m>=0;m--)(c=t[m])&&(u=(p?c(e,a,u):c(u))||u);return p&&u&&k(e,a,u),u};let s=class extends E.TailwindElement(g){constructor(){if(super(),this.id="",this.label="",this.type="text",this.name=`name_${Date.now()}`,this.placeholder="",this.value="",this.required=!1,this.disabled=!1,this.readonly=!1,this.clickable=!1,this.spellcheck=!1,this.align="left",this.autofocus=!1,this.autocomplete="on",this.tabIndex=0,this.error=!1,this.size="md",this.validateOn="touched",this.validationMessage="",this.inputRef=y.createRef(),this.isAutofilled=!1,this.touched=!1,this.dirty=!1,this.submitted=!1,this.defaultValue="","attachInternals"in this)try{this.internals=this.attachInternals()}catch{this.internals=void 0}}willUpdate(t){this.id||(this.id="sch-input-"+s._idCounter++),super.willUpdate(t)}get form(){return this.internals?.form??null}updated(t){super.updated(t),t.has("value")&&(this.value!==this.defaultValue&&(this.dirty=!0),this.internals?.setFormValue(this.value),this.validateInput()),t.has("error")&&this.updateValidityState(),!this.hasUpdated&&t.has("value")&&(this.defaultValue=this.value)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.setupFormIntegration(),this.setupExternalLabelAssociation()}setupFormIntegration(){this.internals?.form&&(this.formResetObserver=new MutationObserver(t=>{for(const e of t)e.type==="attributes"&&e.attributeName==="reset"&&this.resetToDefault()}),this.formResetObserver.observe(this.internals.form,{attributes:!0,childList:!1,subtree:!1}),this.internals.form.addEventListener("reset",()=>{this.resetToDefault()}),this.internals.form.addEventListener("submit",()=>{this.submitted=!0,this.validateInput(!0)}))}setupExternalLabelAssociation(){if(this.id){const t=()=>{document.querySelectorAll(`label[for="${this.id}"]`).forEach(e=>{e.addEventListener("click",()=>{this.focus()})})};document.readyState==="complete"?t():document.addEventListener("DOMContentLoaded",t)}}disconnectedCallback(){super.disconnectedCallback(),this.formResetObserver&&this.formResetObserver.disconnect(),this.id&&document.querySelectorAll(`label[for="${this.id}"]`).forEach(t=>{t.removeEventListener("click",()=>{this.focus()})})}resetToDefault(){this.value=this.defaultValue,this.touched=!1,this.dirty=!1,this.submitted=!1,this.error=!1,this.validationMessage="",this.dispatchEvent(new CustomEvent("reset",{bubbles:!0}))}shouldShowValidation(t=!1){if(t)return!0;switch(this.validateOn){case"always":return!0;case"touched":default:return this.touched;case"dirty":return this.dirty;case"submitted":return this.submitted}}updateValidityState(){this.error?this.validationMessage?this.internals?.setValidity({customError:!0},this.validationMessage,this.inputElement):this.internals?.setValidity({customError:!0},"Invalid input",this.inputElement):this.internals?.setValidity({})}validateInput(t=!1){if(this.disabled)return;const e=this.shouldShowValidation(t),a=this.inputElement?.validity??{customError:!1,valid:!0},p=!a.valid&&!a.customError;e&&p?(this.error=!0,this.validationMessage=this.inputElement?.validationMessage||""):a.valid?(this.error=!1,a.customError||(this.validationMessage="")):e||(this.error=!1),this.updateValidityState()}checkValidity(){const t=this.inputRef.value?.checkValidity()??!0;return this.internals&&!t?(this.internals.checkValidity(),!1):t}reportValidity(){this.touched=!0,this.submitted=!0;const t=this.inputRef.value?.reportValidity()??!0;return this.validateInput(!0),this.internals&&!t?(this.internals.reportValidity(),!1):t}setCustomValidity(t){this.inputRef.value&&this.inputRef.value.setCustomValidity(t),this.validationMessage=t,this.error=t!==""&&this.shouldShowValidation(),this.internals&&(t?this.internals.setValidity({customError:!0},t,this.inputElement):this.internals.setValidity({}))}firstUpdated(){this.autofocus&&setTimeout(()=>{this.focus()},0),this.setupInputEvents(),this.setupFocusBlurEvents(),this.setupAutofillDetection(),this.setupEnterKeyEvents()}setupInputEvents(){r.fromEvent(this.inputElement,"input").pipe(r.map(t=>{const e=t;return{value:t.target.value,inputType:e.inputType,data:e.data,isComposing:e.isComposing,originalEvent:t}}),r.takeUntil(this.disconnecting)).subscribe(t=>{this.value=t.value,this.dirty=this.value!==this.defaultValue;const e=new CustomEvent("input",{detail:{value:t.value},bubbles:!0,composed:!0});Object.defineProperties(e,{inputType:{value:t.inputType},data:{value:t.data},isComposing:{value:t.isComposing}}),this.dispatchEvent(e),this.validateInput()}),r.fromEvent(this.inputElement,"change").pipe(r.map(t=>t.target.value),r.distinctUntilChanged(),r.takeUntil(this.disconnecting)).subscribe(t=>{this.value=t,this.dirty=this.value!==this.defaultValue,this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0})),this.validateInput()})}setupFocusBlurEvents(){r.fromEvent(this.inputElement,"focus").pipe(r.takeUntil(this.disconnecting)).subscribe(t=>{const e=new CustomEvent("focus",{bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed});Object.defineProperties(e,{relatedTarget:{value:t.relatedTarget}}),this.dispatchEvent(e)}),r.fromEvent(this.inputElement,"blur").pipe(r.takeUntil(this.disconnecting)).subscribe(t=>{this.touched=!0,this.disabled||this.validateInput();const e=new CustomEvent("blur",{bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed});Object.defineProperties(e,{relatedTarget:{value:t.relatedTarget}}),this.dispatchEvent(e)})}setupAutofillDetection(){r.fromEvent(this.inputElement,"animationstart").pipe(r.filter(t=>t.animationName==="onAutoFillStart"),r.takeUntil(this.disconnecting)).subscribe(t=>{const{value:e}=t.target;this.value=e,this.isAutofilled=!0,this.dirty=this.value!==this.defaultValue,this.dispatchEvent(new CustomEvent("autofill",{detail:{value:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}),r.fromEvent(this.inputElement,"animationstart").pipe(r.filter(t=>t.animationName==="onAutoFillCancel"),r.takeUntil(this.disconnecting)).subscribe(()=>{this.isAutofilled=!1})}setupEnterKeyEvents(){r.fromEvent(this.inputElement,"keyup").pipe(r.filter(t=>t.key==="Enter"),r.takeUntil(this.disconnecting)).subscribe(t=>{const{value:e}=t.target;this.value=e,this.dirty=this.value!==this.defaultValue;const a=new CustomEvent("enter",{detail:{value:e},bubbles:!0,composed:!0});Object.defineProperties(a,{key:{value:"Enter"},code:{value:"Enter"},keyCode:{value:13},which:{value:13}}),this.dispatchEvent(a)})}select(){return this.inputRef.value?.select()}getValidity(){return this.inputRef.value?.validity}setSelectionRange(t,e,a){this.inputRef.value?.setSelectionRange(t,e,a)}get selectionStart(){return this.inputRef.value?.selectionStart??null}get selectionEnd(){return this.inputRef.value?.selectionEnd??null}get selectionDirection(){return this.inputRef.value?.selectionDirection??null}setRangeText(t,e,a,p){e!==void 0&&a!==void 0?this.inputRef.value?.setRangeText(t,e,a,p):this.inputRef.value?.setRangeText(t)}focus(t){this.inputRef.value?.focus(t),this.dispatchEvent(new Event("focus"))}click(){this.inputRef.value?.click(),this.dispatchEvent(new Event("click"))}blur(){this.inputRef.value?.blur(),this.dispatchEvent(new Event("blur"))}render(){const{height:t,padding:e,fontSize:a}=(()=>{switch(this.size){case"sm":return{height:"40px",padding:"0 8px",fontSize:"0.875rem"};case"lg":return{height:"60px",padding:"0 20px",fontSize:"1.125rem"};default:return{height:"50px",padding:"0 16px",fontSize:"1rem"}}})(),p={"w-full flex-1 rounded-[8px] border-0 bg-surface-highest text-surface-on":!0,"outline-secondary-default focus:outline-1 ":!0,"outline-secondary-default focus:outline-1":!0,"disabled:opacity-40 disabled:cursor-not-allowed":!0,"placeholder:text-muted":!0,"ring-0 ring-inset focus:ring-1 focus:ring-inset":!0,"ring-secondary-default ring-outline focus:ring-secondary-default":!this.error,"ring-error-default focus:ring-error-default":this.error,"caret-transparent focus:outline-hidden cursor-pointer text-select-none":this.readonly,"cursor-pointer":this.clickable,"text-center":this.align==="center","text-right":this.align==="right",autofilled:this.isAutofilled},c={"opacity-40":this.disabled,"block mb-[4px]":!0,"text-sm":this.size==="sm","text-base":this.size==="md","text-lg":this.size==="lg"},u={height:t,padding:e,fontSize:a};return h.html`
-			${b.when(this.label,()=>h.html`
-					<label
-						for=${this.id}
-						id="label-${this.id}"
-						class=${this.classMap(c)}
-						${v.color({color:this.error?f.SchmancyTheme.sys.color.error.default:f.SchmancyTheme.sys.color.primary.default})}
-					>
-						<schmancy-typography type="label" token=${this.size==="sm"?"sm":this.size==="lg"?"lg":"md"}>
-							${this.label}
-						</schmancy-typography>
-					</label>
-				`)}
-
-			<input
-				${v.color({bgColor:f.SchmancyTheme.sys.color.surface.highest,color:f.SchmancyTheme.sys.color.surface.on})}
-				${y.ref(this.inputRef)}
-				id=${this.id}
-				name=${this.name}
-				class=${this.classMap(p)}
-				style=${this.styleMap(u)}
-				.value=${this.value}
-				.type=${this.type}
-				.autocomplete=${this.autocomplete}
-				.spellcheck=${this.spellcheck}
-				placeholder=${this.placeholder}
-				inputmode=${d.ifDefined(this.inputmode)}
-				pattern=${d.ifDefined(this.pattern)}
-				step=${d.ifDefined(this.step)}
-				minlength=${d.ifDefined(this.minlength)}
-				maxlength=${d.ifDefined(this.maxlength)}
-				min=${d.ifDefined(this.min)}
-				max=${d.ifDefined(this.max)}
-				list=${d.ifDefined(this.list)}
-				?required=${this.required}
-				?disabled=${this.disabled}
-				?readonly=${this.readonly}
-				aria-invalid=${this.error?"true":"false"}
-				aria-required=${this.required?"true":"false"}
-				aria-labelledby=${this.label?`label-${this.id}`:h.nothing}
-				aria-describedby=${this.hint?`hint-${this.id}`:h.nothing}
-				aria-label=${d.ifDefined(this.label?void 0:this.placeholder||"Input")}
-				aria-autocomplete=${this.list?"list":"none"}
-			/>
-
-			${b.when(this.hint,()=>h.html`
-					<div
-						id="hint-${this.id}"
-						class="${this.size==="sm"?"pt-[1px] text-xs":this.size==="lg"?"pt-[3px] text-base":"pt-[2px] text-sm"}"
-						${v.color({color:this.error?f.SchmancyTheme.sys.color.error.default:f.SchmancyTheme.sys.color.primary.default})}
-					>
-						<schmancy-typography
-							align="left"
-							type="label"
-							token=${this.size==="sm"?"sm":this.size==="lg"?"lg":"md"}
-						>
-							${this.hint}
-						</schmancy-typography>
-					</div>
-				`)}
-		`}};s._idCounter=0,s.formAssociated=!0,s.shadowRootOptions={...h.LitElement.shadowRootOptions,delegatesFocus:!0},n([i.property({reflect:!0})],s.prototype,"id",2),n([i.property({type:String})],s.prototype,"label",2),n([i.property({reflect:!0})],s.prototype,"type",2),n([i.property()],s.prototype,"name",2),n([i.property()],s.prototype,"placeholder",2),n([i.property({type:String,reflect:!0})],s.prototype,"value",2),n([i.property({type:String,reflect:!0})],s.prototype,"pattern",2),n([i.property({type:Boolean,reflect:!0})],s.prototype,"required",2),n([i.property({type:Boolean,reflect:!0})],s.prototype,"disabled",2),n([i.property({type:Boolean,reflect:!0})],s.prototype,"readonly",2),n([i.property({type:Boolean,reflect:!0})],s.prototype,"clickable",2),n([i.property({type:Boolean,reflect:!0})],s.prototype,"spellcheck",2),n([i.property({type:String,reflect:!0})],s.prototype,"align",2),n([i.property()],s.prototype,"inputmode",2),n([i.property({type:Number,reflect:!0})],s.prototype,"minlength",2),n([i.property({type:Number})],s.prototype,"maxlength",2),n([i.property()],s.prototype,"min",2),n([i.property()],s.prototype,"max",2),n([i.property({type:Number,reflect:!0})],s.prototype,"step",2),n([i.property({type:Boolean})],s.prototype,"autofocus",2),n([i.property({type:String,reflect:!0})],s.prototype,"autocomplete",2),n([i.property({type:Number,reflect:!0})],s.prototype,"tabIndex",2),n([i.property()],s.prototype,"hint",2),n([i.property({type:Boolean,reflect:!0})],s.prototype,"error",2),n([i.property({type:String,reflect:!0})],s.prototype,"size",2),n([i.property({type:String})],s.prototype,"validateOn",2),n([i.property({type:String})],s.prototype,"list",2),n([i.property({type:String})],s.prototype,"validationMessage",2),n([i.query("input")],s.prototype,"inputElement",2),n([i.state()],s.prototype,"isAutofilled",2),n([i.state()],s.prototype,"touched",2),n([i.state()],s.prototype,"dirty",2),n([i.state()],s.prototype,"submitted",2),n([i.state()],s.prototype,"defaultValue",2),s=n([i.customElement("sch-input")],s);var $=Object.defineProperty,S=Object.getOwnPropertyDescriptor,o=(t,e,a,p)=>{for(var c,u=p>1?void 0:p?S(e,a):e,m=t.length-1;m>=0;m--)(c=t[m])&&(u=(p?c(e,a,u):c(u))||u);return p&&u&&$(e,a,u),u};let l=class extends w.SchmancyFormField(g){constructor(){super(...arguments),this.value="",this.type="text",this.placeholder="",this.clickable=!1,this.spellcheck=!1,this.align="left",this.autofocus=!1,this.autocomplete="on",this.tabIndex=0,this.size="md",this.validateOn="touched",this.inputRef=y.createRef(),this.isAutofilled=!1,this.touched=!1,this.dirty=!1,this.submitted=!1,this.defaultValue=""}willUpdate(t){this.id||(this.id="sch-input-"+l._idCounter++),super.willUpdate(t)}updated(t){super.updated(t),t.has("value")&&(this.value!==this.defaultValue&&(this.dirty=!0),this.validateInput()),!this.hasUpdated&&t.has("value")&&(this.defaultValue=this.value)}connectedCallback(){super.connectedCallback(),this.defaultValue=this.value,this.setupFormIntegration(),this.setupExternalLabelAssociation()}setupFormIntegration(){this.form&&(this.formResetObserver=new MutationObserver(t=>{for(const e of t)e.type==="attributes"&&e.attributeName==="reset"&&this.resetToDefault()}),this.formResetObserver.observe(this.form,{attributes:!0,childList:!1,subtree:!1}),this.form.addEventListener("reset",()=>{this.resetToDefault()}),this.form.addEventListener("submit",()=>{this.submitted=!0,this.validateInput(!0)}))}setupExternalLabelAssociation(){if(this.id){const t=()=>{document.querySelectorAll(`label[for="${this.id}"]`).forEach(e=>{e.addEventListener("click",()=>{this.focus()})})};document.readyState==="complete"?t():document.addEventListener("DOMContentLoaded",t)}}disconnectedCallback(){super.disconnectedCallback(),this.formResetObserver&&this.formResetObserver.disconnect(),this.id&&document.querySelectorAll(`label[for="${this.id}"]`).forEach(t=>{t.removeEventListener("click",()=>{this.focus()})})}resetToDefault(){this.value=this.defaultValue,this.touched=!1,this.dirty=!1,this.submitted=!1,this.error=!1,this.validationMessage="",this.dispatchEvent(new CustomEvent("reset",{bubbles:!0}))}shouldShowValidation(t=!1){if(t)return!0;switch(this.validateOn){case"always":return!0;case"touched":default:return this.touched;case"dirty":return this.dirty;case"submitted":return this.submitted}}validateInput(t=!1){if(this.disabled)return;const e=this.shouldShowValidation(t),a=this.inputElement?.validity??{customError:!1,valid:!0},p=!a.valid&&!a.customError;e&&p?(this.error=!0,this.validationMessage=this.inputElement?.validationMessage||""):a.valid?(this.error=!1,a.customError||(this.validationMessage="")):e||(this.error=!1)}checkValidity(){const t=this.inputRef.value?.checkValidity()??!0,e=super.checkValidity();return t&&e}reportValidity(){this.touched=!0,this.submitted=!0;const t=this.inputRef.value?.reportValidity()??!0;this.validateInput(!0);const e=super.reportValidity();return t&&e}setCustomValidity(t){this.inputRef.value&&this.inputRef.value.setCustomValidity(t),super.setCustomValidity(t),this.error=t!==""&&this.shouldShowValidation()}firstUpdated(){this.autofocus&&setTimeout(()=>{this.focus()},0),this.setupInputEvents(),this.setupFocusBlurEvents(),this.setupAutofillDetection(),this.setupEnterKeyEvents()}setupInputEvents(){r.fromEvent(this.inputElement,"input").pipe(r.map(t=>{const e=t;return{value:t.target.value,inputType:e.inputType,data:e.data,isComposing:e.isComposing,originalEvent:t}}),r.takeUntil(this.disconnecting)).subscribe(t=>{this.value=t.value,this.dirty=this.value!==this.defaultValue;const e=new CustomEvent("input",{detail:{value:t.value},bubbles:!0,composed:!0});Object.defineProperties(e,{inputType:{value:t.inputType},data:{value:t.data},isComposing:{value:t.isComposing}}),this.dispatchEvent(e),this.validateInput()}),r.fromEvent(this.inputElement,"change").pipe(r.map(t=>t.target.value),r.distinctUntilChanged(),r.takeUntil(this.disconnecting)).subscribe(t=>{this.value=t,this.dirty=this.value!==this.defaultValue,this.emitChange({value:t}),this.validateInput()})}setupFocusBlurEvents(){r.fromEvent(this.inputElement,"focus").pipe(r.takeUntil(this.disconnecting)).subscribe(t=>{const e=new CustomEvent("focus",{bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed});Object.defineProperties(e,{relatedTarget:{value:t.relatedTarget}}),this.dispatchEvent(e)}),r.fromEvent(this.inputElement,"blur").pipe(r.takeUntil(this.disconnecting)).subscribe(t=>{this.touched=!0,this.disabled||this.validateInput();const e=new CustomEvent("blur",{bubbles:t.bubbles,cancelable:t.cancelable,composed:t.composed});Object.defineProperties(e,{relatedTarget:{value:t.relatedTarget}}),this.dispatchEvent(e)})}setupAutofillDetection(){r.fromEvent(this.inputElement,"animationstart").pipe(r.filter(t=>t.animationName==="onAutoFillStart"),r.takeUntil(this.disconnecting)).subscribe(t=>{const{value:e}=t.target;this.value=e,this.isAutofilled=!0,this.dirty=this.value!==this.defaultValue,this.dispatchEvent(new CustomEvent("autofill",{detail:{value:e},bubbles:!0,composed:!0})),this.emitChange({value:e})}),r.fromEvent(this.inputElement,"animationstart").pipe(r.filter(t=>t.animationName==="onAutoFillCancel"),r.takeUntil(this.disconnecting)).subscribe(()=>{this.isAutofilled=!1})}setupEnterKeyEvents(){r.fromEvent(this.inputElement,"keydown").pipe(r.filter(t=>t.key==="Enter"),r.takeUntil(this.disconnecting)).subscribe(t=>{const{value:e}=t.target;this.value!==e&&(this.value=e,this.dirty=this.value!==this.defaultValue),this.inputElement.blur();const a=new CustomEvent("enter",{detail:{value:this.value},bubbles:!0,composed:!0});Object.defineProperties(a,{key:{value:"Enter"},code:{value:"Enter"},keyCode:{value:13},which:{value:13}}),this.dispatchEvent(a)})}select(){return this.inputRef.value?.select()}getValidity(){return this.inputRef.value?.validity}setSelectionRange(t,e,a){this.inputRef.value?.setSelectionRange(t,e,a)}get selectionStart(){return this.inputRef.value?.selectionStart??null}get selectionEnd(){return this.inputRef.value?.selectionEnd??null}get selectionDirection(){return this.inputRef.value?.selectionDirection??null}setRangeText(t,e,a,p){e!==void 0&&a!==void 0?this.inputRef.value?.setRangeText(t,e,a,p):this.inputRef.value?.setRangeText(t)}focus(t){this.inputRef.value?.focus(t),this.dispatchEvent(new Event("focus"))}click(){this.inputRef.value?.click(),this.dispatchEvent(new Event("click"))}blur(){this.inputRef.value?.blur(),this.dispatchEvent(new Event("blur"))}render(){const{height:t,padding:e,fontSize:a}=(()=>{switch(this.size){case"sm":return{height:"40px",padding:"0 8px",fontSize:"0.875rem"};case"lg":return{height:"60px",padding:"0 20px",fontSize:"1.125rem"};default:return{height:"50px",padding:"0 16px",fontSize:"1rem"}}})(),p=["date","datetime-local","time","month","week"].includes(this.type),c={"block w-full min-w-0 rounded-[8px] border-0 bg-surface-highest text-surface-on":!0,"outline-secondary-default focus:outline-1":!0,"disabled:opacity-40 disabled:cursor-not-allowed":!0,"placeholder:text-muted":!0,"ring-0 ring-inset focus:ring-1 focus:ring-inset":!0,"ring-secondary-default ring-outline focus:ring-secondary-default":!this.error,"ring-error-default focus:ring-error-default":this.error,"caret-transparent focus:outline-hidden cursor-pointer select-none":this.readonly,"cursor-pointer":this.clickable,"text-left":this.align==="left"||p,"text-center":this.align==="center"&&!p,"text-right":this.align==="right"&&!p,autofilled:this.isAutofilled},u={"block mb-1 font-medium":!0,"opacity-40":this.disabled,"text-sm":this.size==="sm","text-base":this.size==="md","text-lg":this.size==="lg","text-primary-default":!this.error,"text-error-default":this.error},m={height:t,padding:e,fontSize:a,lineHeight:t};return h.html`
-			<div class="w-full min-w-0 ${p?"date-input-container":""}">
-				${b.when(this.label,()=>h.html`
-						<label
-							for=${this.id}
-							class=${this.classMap(u)}
-						>
-							${this.label}
-						</label>
-					`)}
-
-				<input
-					${y.ref(this.inputRef)}
-					id=${this.id}
-					name=${this.name}
-					class=${this.classMap(c)}
-					style=${this.styleMap(m)}
-					.value=${this.value}
-					.type=${this.type}
-					.autocomplete=${this.autocomplete}
-					.spellcheck=${this.spellcheck}
-					placeholder=${this.placeholder}
-					inputmode=${d.ifDefined(this.inputmode)}
-					pattern=${d.ifDefined(this.pattern)}
-					step=${d.ifDefined(this.step)}
-					minlength=${d.ifDefined(this.minlength)}
-					maxlength=${d.ifDefined(this.maxlength)}
-					min=${d.ifDefined(this.min)}
-					max=${d.ifDefined(this.max)}
-					list=${d.ifDefined(this.list)}
-					?required=${this.required}
-					?disabled=${this.disabled}
-					?readonly=${this.readonly}
-					aria-invalid=${this.error?"true":"false"}
-					aria-required=${this.required?"true":"false"}
-					aria-labelledby=${this.label?`label-${this.id}`:h.nothing}
-					aria-describedby=${this.hint||this.validationMessage?`hint-${this.id}`:h.nothing}
-					aria-label=${d.ifDefined(this.label?void 0:this.placeholder||"Input")}
-				/>
-
-				${b.when(this.hint||this.error&&this.validationMessage,()=>h.html`
-						<div
-							id="hint-${this.id}"
-							class="mt-1 text-sm ${this.error?"text-error-default":"text-surface-onVariant"}"
-						>
-							${this.error&&this.validationMessage?this.validationMessage:this.hint}
-						</div>
-					`)}
-			</div>
-		`}};l._idCounter=0,l.shadowRootOptions={...h.LitElement.shadowRootOptions,delegatesFocus:!0},o([i.property({type:String,reflect:!0})],l.prototype,"value",2),o([i.property({reflect:!0})],l.prototype,"type",2),o([i.property()],l.prototype,"placeholder",2),o([i.property({type:String,reflect:!0})],l.prototype,"pattern",2),o([i.property({type:Boolean,reflect:!0})],l.prototype,"clickable",2),o([i.property({type:Boolean,reflect:!0})],l.prototype,"spellcheck",2),o([i.property({type:String,reflect:!0})],l.prototype,"align",2),o([i.property()],l.prototype,"inputmode",2),o([i.property({type:Number,reflect:!0})],l.prototype,"minlength",2),o([i.property({type:Number})],l.prototype,"maxlength",2),o([i.property()],l.prototype,"min",2),o([i.property()],l.prototype,"max",2),o([i.property({type:Number,reflect:!0})],l.prototype,"step",2),o([i.property({type:Boolean})],l.prototype,"autofocus",2),o([i.property({type:String,reflect:!0})],l.prototype,"autocomplete",2),o([i.property({type:Number,reflect:!0})],l.prototype,"tabIndex",2),o([i.property({type:String,reflect:!0})],l.prototype,"size",2),o([i.property({type:String})],l.prototype,"validateOn",2),o([i.property({type:String})],l.prototype,"list",2),o([i.query("input")],l.prototype,"inputElement",2),o([i.state()],l.prototype,"isAutofilled",2),o([i.state()],l.prototype,"touched",2),o([i.state()],l.prototype,"dirty",2),o([i.state()],l.prototype,"submitted",2),o([i.state()],l.prototype,"defaultValue",2),l=o([i.customElement("schmancy-input")],l);
-//# sourceMappingURL=input-DcWJTrr9.cjs.map

package/types/src/data/countries.d.ts

@@ -1,5 +0,0 @@
-declare const _default: {
-    name: string;
-    code: string;
-}[];
-export default _default;

package/types/src/data/index.d.ts

@@ -1 +0,0 @@
-export * from './countries';

package/types/src/notification/$notification.d.ts

@@ -1,13 +0,0 @@
-import { SchmancyNotification } from './notification';
-export type TNotification = 'success' | 'error' | 'warning' | 'info';
-export type TNotificationConfig = {
-    action?: typeof Function;
-    duration?: number;
-};
-export declare const $notify: {
-    success: (message: string, config?: TNotificationConfig) => SchmancyNotification;
-    error: (message: string, config?: TNotificationConfig) => SchmancyNotification;
-    warning: (message: string, config?: TNotificationConfig) => SchmancyNotification;
-    info: (message: string, config?: TNotificationConfig) => SchmancyNotification;
-    dismiss: (component: SchmancyNotification) => void;
-};

package/types/src/store/action-creator.d.ts

@@ -1,8 +0,0 @@
-export type Action<T = any> = {
-    type: string;
-    payload?: T;
-};
-export type ActionCreator<P = void, R = void> = P extends void ? () => R : (payload: P) => R;
-export type ActionCreatorMap<T> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => R : never;
-};

package/types/src/store/clear.d.ts

@@ -1 +0,0 @@
-export default function contextClear(): void;

package/types/src/v2/form.d.ts

@@ -1,51 +0,0 @@
-declare const SchForm_base: import("../../mixins").Constructor<CustomElementConstructor> & import("../../mixins").Constructor<import("@mixins/tailwind.mixin").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
-/**
- * A form component that enforces native browser validation
- * for all contained form elements.
- *
- * @example
- * ```html
- * <sch-form @submit=${handleSubmit}>
- *   <sch-input label="Name" required></sch-input>
- *   <schmancy-button type="submit">Submit</schmancy-button>
- * </sch-form>
- * ```
- */
-export declare class SchForm extends SchForm_base {
-    /**
-     * If true, form validation will be skipped
-     */
-    novalidate: boolean;
-    /**
-     * The form's submission method (get or post)
-     */
-    method: 'get' | 'post';
-    /**
-     * The URL to submit the form to
-     */
-    action: string;
-    /**
-     * The form's encoding type
-     */
-    enctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
-    /**
-     * Reference to the internal form element
-     */
-    formElement: HTMLFormElement;
-    /**
-     * Handle form submission
-     * This is the key method that ensures browser validation works
-     */
-    private handleSubmit;
-    /**
-     * Reset the form
-     */
-    reset(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sch-form': SchForm;
-    }
-}
-export {};

package/types/src/v2/index.d.ts

@@ -1,2 +0,0 @@
-export * from './form';
-export * from './input';

package/types/src/v2/input.d.ts

@@ -1,71 +0,0 @@
-declare const SchInput_base: import("../../mixins").Constructor<import("@mixins/formField.mixin").IFormFieldMixin> & import("../../mixins").Constructor<import("../../mixins").ITailwindElementMixin> & import("../../mixins").Constructor<import("lit").LitElement> & import("../../mixins").Constructor<import("../../mixins").IBaseMixin>;
-/**
- * A simplified input component that works with browser validation.
- *
- * @example
- * ```html
- * <sch-input
- *   label="Email"
- *   name="email"
- *   required
- *   type="email"
- * ></sch-input>
- * ```
- */
-export default class SchInput extends SchInput_base {
-    /**
-     * The type of input (text, email, password, etc.)
-     */
-    type: string;
-    /**
-     * Placeholder text
-     */
-    placeholder: string;
-    /**
-     * Minimum input length
-     */
-    minlength?: number;
-    /**
-     * Maximum input length
-     */
-    maxlength?: number;
-    /**
-     * Pattern for validation
-     */
-    pattern?: string;
-    /**
-     * Whether to enable autocomplete
-     */
-    autocomplete: string;
-    /**
-     * Reference to the internal input element
-     */
-    private inputRef;
-    /**
-     * Handle input change
-     */
-    private handleInput;
-    /**
-     * Focus the input
-     */
-    focus(options?: FocusOptions): void;
-    /**
-     * Blur the input
-     */
-    blur(): void;
-    /**
-     * Let the browser handle validation
-     */
-    checkValidity(): boolean;
-    /**
-     * Use the browser's built-in validation UI
-     */
-    reportValidity(): boolean;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sch-input': SchInput;
-    }
-}
-export {};