@mhmo91/schmancy 0.2.114 → 0.2.116

package/types/src/autocomplete/autocomplete.d.ts

@@ -2,18 +2,25 @@ export type SchmancyAutocompleteChangeEvent = CustomEvent<{
     value: string | string[];
 }>;
 declare const SchmancyAutocomplete_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * The SchmancyAutocomplete component provides an accessible autocomplete field with keyboard navigation.
+ * @element schmancy-autocomplete
+ * @fires change - Emitted when a selection is made
+ * @slot - Default slot for schmancy-option elements
+ * @slot trigger - Optional slot to override the default input
+ */
 export default class SchmancyAutocomplete extends SchmancyAutocomplete_base {
     required: boolean;
     placeholder: string;
     value: string;
     label: string;
-    /**
-     * ⚠️ If you still want an explicit fallback for maximum dropdown height,
-     * you can keep this, but the `size()` middleware will already set a
-     * dynamic max-height based on viewport space.
-     */
     maxHeight: string;
     multi: boolean;
+    /**
+     * Optional description for the autocomplete to improve accessibility.
+     * Will be associated with the input via aria-describedby.
+     */
+    description: string;
     /** Direct reference to the <input> inside <schmancy-input> */
     inputRef: import("lit-html/directives/ref").Ref<HTMLInputElement>;
     private optionsContainer;
@@ -21,13 +28,15 @@ export default class SchmancyAutocomplete extends SchmancyAutocomplete_base {
     private input;
     private options;
     private readonly searchTerm$;
+    private isOpen;
     private startY;
+    private statusMessage;
     connectedCallback(): void;
     firstUpdated(): void;
     protected updated(changedProps: Map<string | number | symbol, unknown>): void;
     /**
      * When the <slot> changes (i.e. options are added/removed), update the following:
-     * 1. Show or hide the “No results found” option.
+     * 1. Show or hide the "No results found" option.
      * 2. Sync the selection state.
      * 3. Setup accessibility attributes on the options.
      */
@@ -59,10 +68,11 @@ export default class SchmancyAutocomplete extends SchmancyAutocomplete_base {
      * – When open, ArrowDown/ArrowUp move focus between options (which must have role="option").
      * – Enter or Space selects the active option.
      * – Escape (or Tab) hides the dropdown.
+     * - Home/End to navigate to first/last option
      */
     private handleKeyDown;
     /**
-     * Helper to focus an option by index and update the combobox’s aria-activedescendant.
+     * Helper to focus an option by index and update the combobox's aria-activedescendant.
      */
     private focusOption;
     render(): import("lit-html").TemplateResult<1>;

package/types/src/components/form-elements/payment-card-form.d.ts

@@ -1,29 +1,82 @@
 import SchmancyForm from '@schmancy/form/form';
 import SchmancyInput from '@schmancy/input/input';
 declare const SchmancyPaymentCardForm_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * @element schmancy-payment-card-form
+ * A mobile-friendly payment card form component that provides real-time validation
+ * and formatting for credit card information.
+ *
+ * @fires change - Fires when any field in the form changes
+ * @slot - Default slot for any additional content
+ */
 export declare class SchmancyPaymentCardForm extends SchmancyPaymentCardForm_base {
+    /**
+     * The form data containing all payment card information
+     */
     value: {
         cardName: string;
         cardNumber: string;
         expirationDate: string;
         cvv: string;
     };
+    /**
+     * The detected card type (visa, mastercard, amex, etc.)
+     * This is determined automatically by the Cleave.js library
+     */
+    cardType: string;
+    /**
+     * Individual field values tracked with state properties for reactivity
+     */
     cardName: string | undefined;
     cardNumber: string | undefined;
     expirationDate: string | undefined;
     cvv: string | undefined;
+    /**
+     * Field validity states for enhanced validation feedback
+     */
+    isCardNameValid: boolean;
+    isCardNumberValid: boolean;
+    isExpirationDateValid: boolean;
+    isCvvValid: boolean;
+    /**
+     * Query selectors for the form elements
+     */
     cardNumberInput: SchmancyInput;
     expirationDateInput: SchmancyInput;
     cvvInput: SchmancyInput;
     cardNameInput: SchmancyInput;
     form: SchmancyForm;
+    /**
+     * When the component is first updated, initialize the Cleave.js formatters
+     * for the credit card fields with appropriate validations
+     */
     firstUpdated(): void;
-    /** Checks for validity of the control and shows the browser message if it's invalid. */
+    /**
+     * Checks for validity of the entire form
+     * @returns {boolean} True if the form is valid
+     */
     reportValidity(): boolean;
-    /** Checks for validity of the control and emits the invalid event if it invalid. */
+    /**
+     * Checks for validity of the form
+     * @returns {boolean} True if the form is valid
+     */
     checkValidity(): boolean;
-    emitChange(): void;
-    protected render(): unknown;
+    /**
+     * Emit change event when any input value changes
+     */
+    private emitChange;
+    /**
+     * Render the payment card form with a responsive grid layout
+     */
+    protected render(): import("lit-html").TemplateResult<1>;
+    /**
+     * Helper method to render card type icon based on detected card type
+     */
+    private getCardIcon;
+    /**
+     * Helper method to render a security and acceptance notice
+     */
+    private renderSecurityNotice;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,8 +1,21 @@
 declare const SchmancyCountriesSelect_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export declare class SchmancyCountriesSelect extends SchmancyCountriesSelect_base {
+    static formAssociated: boolean;
+    private internals?;
     value?: string;
     chip: string;
     required: boolean;
+    label: string;
+    hint: string;
+    placeholder: string;
+    name: string;
+    private autocomplete;
+    constructor();
+    get form(): HTMLFormElement;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    updated(changedProps: Map<string, unknown>): void;
+    private handleChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/extra/timezone/timezone.d.ts

@@ -1,8 +1,21 @@
 declare const SchmancyTimezonesSelect_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export declare class SchmancyTimezonesSelect extends SchmancyTimezonesSelect_base {
+    static formAssociated: boolean;
+    private internals?;
     value?: string;
     chip: string;
     required: boolean;
+    label: string;
+    hint: string;
+    placeholder: string;
+    name: string;
+    private autocomplete;
+    constructor();
+    get form(): HTMLFormElement;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    updated(changedProps: Map<string, unknown>): void;
+    private handleChange;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/index.d.ts

@@ -39,3 +39,4 @@ export * from './types';
 export * from './typewriter';
 export * from './typography';
 export * from './utils';
+export * from './v2';

package/types/src/option/option.d.ts

@@ -7,6 +7,9 @@ export default class SchmancyOption extends SchmancyOption_base {
     value: string;
     label: string | undefined;
     selected: boolean;
+    private updateLabelFromSlot;
+    connectedCallback(): void;
+    firstUpdated(): void;
     private handleOptionClick;
     private getSlotContent;
     focus(): void;

package/types/src/select/select.d.ts

@@ -1,15 +1,18 @@
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 export type SchmancySelectChangeEvent = CustomEvent<{
     value: string | string[];
 }>;
 declare const SchmancySelect_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
 export declare class SchmancySelect extends SchmancySelect_base {
+    static formAssociated: boolean;
+    private internals?;
     name: string | undefined;
     required: boolean;
     placeholder: string;
     value: string | string[];
     multi: boolean;
     label: string;
+    hint: string;
     private isOpen;
     private valueLabel;
     private isValid;
@@ -18,9 +21,13 @@ export declare class SchmancySelect extends SchmancySelect_base {
     private inputRef;
     private options;
     private cleanupPositioner?;
+    private _userInteracted;
+    constructor();
+    get form(): HTMLFormElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    updated(changedProps: PropertyValues): void;
     private syncSelection;
     private setupOptionsAccessibility;
     private positionDropdown;
@@ -33,6 +40,7 @@ export declare class SchmancySelect extends SchmancySelect_base {
     checkValidity(): boolean;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
+    reset(): void;
     render(): TemplateResult;
 }
 declare global {

package/types/src/sheet/header.d.ts

@@ -1,6 +1,5 @@
 declare const SchmancySheetHeader_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 SchmancySheetHeader extends SchmancySheetHeader_base {
-    title: string;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/sheet/sheet.d.ts

@@ -1,30 +1,149 @@
 import { SchmancySheetPosition } from './sheet.service';
 declare const SchmancySheet_base: CustomElementConstructor & import("@mixins/index").Constructor<import("lit").LitElement> & import("@mixins/index").Constructor<import("@mixins/index").IBaseMixin>;
+/**
+ * `<schmancy-sheet>` component
+ *
+ * A modal sheet component that can be positioned at the bottom or side of the viewport.
+ * Supports customizable animations, focus management, and accessibility features.
+ *
+ * @element schmancy-sheet
+ * @fires before-close - Fired before the sheet begins closing (cancelable)
+ * @fires close - Fired when the sheet has closed
+ * @fires open - Fired when the sheet has opened
+ */
 export default class SchmancySheet extends SchmancySheet_base {
+    /** Unique identifier for the sheet */
     uid: string;
+    /** Controls whether the sheet is open or closed */
     open: boolean;
+    /** Controls visibility of the header section */
     header: 'hidden' | 'visible';
+    /** Position of the sheet */
     position: SchmancySheetPosition;
+    /** Whether the sheet persists after closing */
     persist: boolean;
+    /** Whether clicking the overlay dismisses the sheet */
     allowOverlayDismiss: boolean;
+    /** Prevents closing by backdrop click, even if allowOverlayDismiss is true */
+    preventBackdropClick: boolean;
+    /** Title displayed in the header */
     title: string;
+    /** Accessible label for the sheet (for screen readers) */
+    ariaLabel: string;
+    /** ARIA describedby attribute value */
+    ariaDescribedBy?: string;
+    /** Custom selector to specify which element receives focus when opened */
+    initialFocusSelector?: string;
+    /** Animation duration in milliseconds */
+    animationDuration: number;
+    /** Animation easing function */
+    animationEasing: string;
+    /** Attribute to specify which element should receive focus when the sheet opens */
+    focusAttribute: string;
+    /** Ref to the sheet container */
     private sheet;
+    /** Ref to the sheet body */
+    bodyElement: HTMLElement;
+    /** Collection of assigned elements */
     private assignedElements;
-    focusAttribute: string;
+    /** Tracks the element that had focus before the sheet opened */
     private lastFocusedElement;
+    /** For touch interactions */
+    private startY;
+    private currentY;
+    /** ResizeObserver instance */
+    private resizeObserver;
+    /**
+     * Lifecycle callback for when the 'open' property changes
+     */
     onOpenChange(_oldValue: boolean, newValue: boolean): void;
+    /**
+     * Component connected to DOM
+     */
     connectedCallback(): void;
+    /**
+     * First update lifecycle callback
+     */
+    firstUpdated(): void;
+    /**
+     * Component updated lifecycle callback
+     */
+    updated(changedProps: Map<string, unknown>): void;
+    /**
+     * Component disconnected from DOM
+     */
     disconnectedCallback(): void;
+    /**
+     * Updates CSS custom properties
+     */
+    private updateCssVariables;
+    /**
+     * Sets up event listeners
+     */
     private setupEventListeners;
+    /**
+     * Check if focus is within the sheet
+     */
     private sheetContainsFocus;
+    /**
+     * Announce presence to the sheet service
+     */
     private announcePresence;
+    /**
+     * Add focus trap to keep focus within sheet when open
+     */
     private addFocusTrap;
+    /**
+     * Remove focus trap
+     */
     private removeFocusTrap;
+    /**
+     * Handle focus events to trap focus
+     */
     private handleFocusIn;
+    /**
+     * Handle scroll events
+     */
+    private handleScroll;
+    /**
+     * Updates the aria-hidden and aria-modal attributes
+     */
     setIsSheetShown(isShown: boolean): void;
+    /**
+     * Closes the sheet
+     */
     closeSheet(): void;
+    /**
+     * Update dimensions based on viewport
+     */
+    private updateSheetDimensions;
+    /**
+     * Find the element that should receive focus
+     */
     private getFocusElement;
+    /**
+     * Set focus within the sheet
+     */
     focus(): void;
+    /**
+     * Fire events with consistent format
+     */
+    private fireEvent;
+    /**
+     * Handle touch start for swipe gesture
+     */
+    private handleTouchStart;
+    /**
+     * Handle touch move for swipe gesture
+     */
+    private handleTouchMove;
+    /**
+     * Handle touch end for swipe gesture
+     */
+    private handleTouchEnd;
+    /**
+     * Render the component
+     */
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/types/src/utils/search.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Calculate similarity score between two strings.
+ * Returns a value between 0 (no match) and 1 (exact match).
+ * Includes all similarity methods from the original filter directive.
+ *
+ * @param query The search query string
+ * @param target The target string to compare against
+ * @returns A similarity score from 0 to 1
+ */
+export declare function similarity(query: string, target: string): number;

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

@@ -0,0 +1,51 @@
+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

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

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

@@ -0,0 +1,71 @@
+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 {};

package/dist/autocomplete-BU0sC_l-.cjs

@@ -1,49 +0,0 @@
-"use strict";const E=require("@floating-ui/dom"),D=require("rxjs");require("lit/directives/class-map.js"),require("lit/directives/style-map.js");const Y=require("./litElement.mixin-djlKJ0lX.cjs");require("./tailwind.mixin-CBhPue3q.cjs");const j=require("./ripple-C2BHbhcS.cjs"),H=require("./theme.interface-Xg5Zi46a.cjs"),P=require("lit"),u=require("lit/decorators.js"),U=require("lit/directives/ref.js"),A=require("rxjs/operators"),C=new Uint32Array(65536),z=(t,e)=>{if(t.length<e.length){const i=e;e=t,t=i}return e.length===0?t.length:t.length<=32?((i,o)=>{const n=i.length,r=o.length,l=1<<n-1;let p=-1,y=0,$=n,h=n;for(;h--;)C[i.charCodeAt(h)]|=1<<h;for(h=0;h<r;h++){let b=C[o.charCodeAt(h)];const v=b|y;b|=(b&p)+p^p,y|=~(b|p),p&=b,y&l&&$++,p&l&&$--,y=y<<1|1,p=p<<1|~(v|y),y&=v}for(h=n;h--;)C[i.charCodeAt(h)]=0;return $})(t,e):((i,o)=>{const n=o.length,r=i.length,l=[],p=[],y=Math.ceil(n/32),$=Math.ceil(r/32);for(let s=0;s<y;s++)p[s]=-1,l[s]=0;let h=0;for(;h<$-1;h++){let s=0,m=-1;const x=32*h,w=Math.min(32,r)+x;for(let a=x;a<w;a++)C[i.charCodeAt(a)]|=1<<a;for(let a=0;a<n;a++){const O=C[o.charCodeAt(a)],g=p[a/32|0]>>>a&1,f=l[a/32|0]>>>a&1,T=O|s,M=((O|f)&m)+m^m|O|f;let k=s|~(M|m),S=m&M;k>>>31^g&&(p[a/32|0]^=1<<a),S>>>31^f&&(l[a/32|0]^=1<<a),k=k<<1|g,S=S<<1|f,m=S|~(T|k),s=k&T}for(let a=x;a<w;a++)C[i.charCodeAt(a)]=0}let b=0,v=-1;const q=32*h,V=Math.min(32,r-q)+q;for(let s=q;s<V;s++)C[i.charCodeAt(s)]|=1<<s;let I=r;for(let s=0;s<n;s++){const m=C[o.charCodeAt(s)],x=p[s/32|0]>>>s&1,w=l[s/32|0]>>>s&1,a=m|b,O=((m|w)&v)+v^v|m|w;let g=b|~(O|v),f=v&O;I+=g>>>r-1&1,I-=f>>>r-1&1,g>>>31^x&&(p[s/32|0]^=1<<s),f>>>31^w&&(l[s/32|0]^=1<<s),g=g<<1|x,f=f<<1|w,v=f|~(a|g),b=g&a}for(let s=q;s<V;s++)C[i.charCodeAt(s)]=0;return I})(t,e)};var N=Object.defineProperty,B=Object.getOwnPropertyDescriptor,d=(t,e,i,o)=>{for(var n,r=o>1?void 0:o?B(e,i):e,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o?n(e,i,r):n(r))||r);return o&&r&&N(e,i,r),r};let c=class extends Y.$LitElement(":host{display:block;border:unset!important;line-height:unset!important;background:unset!important;padding:unset!important;font-size:unset!important;box-shadow:unset!important}:host:focus{box-shadow:unset!important}"){constructor(){super(...arguments),this.required=!1,this.placeholder="",this.value="",this.label="",this.maxHeight="25vh",this.multi=!1,this.inputRef=U.createRef(),this.searchTerm$=new D.Subject,this.startY=0,this.handleKeyDown=t=>{const e=this.options.filter(o=>!o.hidden);if(this.optionsContainer.hasAttribute("hidden"))return void(["Enter"," ","ArrowDown"].includes(t.key)&&(t.preventDefault(),this.showOptions().then(()=>{e.length>0&&this.focusOption(e,0)})));let i=e.findIndex(o=>o.matches(":focus"));switch(i===-1&&(i=0),t.key){case"Escape":t.preventDefault(),this.hideOptions(),this.input.focus();break;case"ArrowDown":t.preventDefault(),this.focusOption(e,Math.min(i+1,e.length-1));break;case"ArrowUp":t.preventDefault(),this.focusOption(e,Math.max(i-1,0));break;case"Enter":case" ":if(t.preventDefault(),e[i]){const o=e[i].getAttribute("data-value")||e[i].getAttribute("value");o&&this.handleOptionClick(o)}break;case"Tab":this.hideOptions()}}}connectedCallback(){super.connectedCallback(),this.id||(this.id=`schmancy-autocomplete-${Math.random().toString(36).substr(2,9)}`),D.fromEvent(this,"keydown").pipe(A.takeUntil(this.disconnecting)).subscribe({next:t=>{this.handleKeyDown(t)}}),this.searchTerm$.pipe(A.distinctUntilChanged(),A.tap(t=>{const e=t.trim().toLowerCase(),i=this.options.map(o=>{const n=o.label.toLowerCase();return{option:o,levDistance:z(e,n)}}).filter(({option:o,levDistance:n})=>e.length<3||n<=o.label.toLowerCase().length-e.length).sort((o,n)=>o.levDistance-n.levDistance);this.options.forEach(o=>o.hidden=!0);for(const{option:o}of i)o.hidden=!1;this.empty.hidden=i.length>0,this.setupOptionsAccessibility(),this.requestUpdate()}),A.takeUntil(this.disconnecting)).subscribe(()=>{this.showOptions()}),D.fromEvent(this,"focusout").pipe(A.takeUntil(this.disconnecting),A.filter(t=>{var e;return((e=t.relatedTarget)==null?void 0:e.tagName)!=="SCHMANCY-OPTION"}),A.switchMap(()=>{this.options.forEach(e=>e.hidden=!1);const t=this.optionsContainer.animate([{opacity:1},{opacity:0}],{duration:150,easing:"cubic-bezier(0.5, 0.01, 0.25, 1)"});return D.from(new Promise(e=>{t.onfinish=()=>{this.optionsContainer.style.display="none",this.optionsContainer.style.opacity="1",e()}}))})).subscribe({next:()=>{var t;if(this.multi){const e=this.options.filter(i=>i.selected).map(i=>i.label);this.input.value=e.join(", ")}else this.input.value=((t=this.options.find(e=>e.value===this.value))==null?void 0:t.label)??""}})}firstUpdated(){this.updateInputValue()}updated(t){super.updated(t),t.has("value")&&(this.syncSelectionFromValue(),this.updateInputValue())}handleSlotChange(){this.empty.hidden=this.options.some(t=>!t.hidden),this.syncSelectionFromValue(),this.updateInputValue(),this.setupOptionsAccessibility()}setupOptionsAccessibility(){this.options.forEach((t,e)=>{t.setAttribute("role","option"),t.id||(t.id=`${this.id}-option-${e}`),t.tabIndex=-1,t.setAttribute("aria-selected",String(this.multi?t.selected:t.value===this.value))})}syncSelectionFromValue(){if(this.multi){const t=this.value.split(",").map(e=>e.trim()).filter(Boolean);this.options.forEach(e=>{e.selected=t.includes(e.value)})}else this.options.forEach(t=>{t.selected=t.value===this.value})}updateInputValue(){requestAnimationFrame(()=>{var t;if(this.multi){const e=this.options.filter(i=>i.selected).map(i=>i.label);this.input.value=e.join(", ")}else{const e=(t=this.options.find(i=>i.value===this.value))==null?void 0:t.label;this.input.value=e??""}})}async showOptions(){this.optionsContainer.removeAttribute("hidden"),this.optionsContainer.style.display="block";const{x:t,y:e}=await E.computePosition(this.input,this.optionsContainer,{placement:"bottom-start",middleware:[E.offset(5),E.shift({padding:5}),E.size({apply({availableWidth:i,availableHeight:o,elements:n,rects:r}){const l=r.reference.width;n.floating.style.minWidth=`${l}px`,n.floating.style.maxWidth=`${i}px`,n.floating.style.maxHeight=`${o}px`}})]});Object.assign(this.optionsContainer.style,{left:`${t}px`,top:`${e}px`,position:"absolute",zIndex:"9999",overflowY:"auto"})}hideOptions(){var t;(t=this.optionsContainer)==null||t.setAttribute("hidden","true"),this.optionsContainer&&(this.optionsContainer.style.display="none")}handleInputChange(t){t.preventDefault(),t.stopPropagation();const e=t.detail.value;this.searchTerm$.next(e)}handleOptionClick(t){if(this.multi){const e=this.options.find(o=>o.value===t);e&&(e.selected=!e.selected);const i=this.options.filter(o=>o.selected).map(o=>o.value);this.value=i.join(","),this.updateInputValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:i},bubbles:!0,composed:!0}))}else this.hideOptions(),this.value=t,this.updateInputValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0}))}checkValidity(){return this.multi?this.options.some(t=>t.selected):!!this.value}reportValidity(){var t;return(t=this.inputRef.value)==null?void 0:t.reportValidity()}handleTouchStart(t){var e,i;this.startY=((i=(e=t.touches)==null?void 0:e[0])==null?void 0:i.clientY)??0}preventScroll(t){var r,l;const e=t.target;if(!this.optionsContainer.contains(e))return;const i=this.optionsContainer.scrollTop,o=this.optionsContainer.scrollHeight-this.optionsContainer.offsetHeight,n=((l=(r=t.touches)==null?void 0:r[0])==null?void 0:l.clientY)??0;(i<=0&&n>this.startY||i>=o&&n<this.startY)&&t.preventDefault()}focusOption(t,e){const i=t[e];i&&(i.focus(),this.input.setAttribute("aria-activedescendant",i.id))}render(){var e;const t=!((e=this.optionsContainer)!=null&&e.hasAttribute("hidden"));return P.html`
-			<div class="relative">
-				<!-- The trigger slot (if any) overrides the default SchmancyInput -->
-				<slot name="trigger">
-					<schmancy-input
-						${U.ref(this.inputRef)}
-						id="input"
-						class="w-full"
-						.label=${this.label}
-						.placeholder=${this.placeholder}
-						.required=${this.required}
-						type="search"
-						inputmode="text"
-						autocomplete="off"
-						clickable
-						role="combobox"
-						aria-autocomplete="list"
-						aria-haspopup="listbox"
-						aria-controls="options"
-						aria-expanded=${t}
-						@focus=${()=>this.showOptions()}
-						@change=${this.handleInputChange}
-					>
-					</schmancy-input>
-				</slot>
-
-				<ul
-					id="options"
-					tabindex="-1"
-					class="absolute z-30 mt-1 w-full overflow-auto rounded-md shadow-sm"
-					role="listbox"
-					aria-multiselectable=${this.multi?"true":"false"}
-					hidden
-					@click=${i=>{var n;const o=(n=i.detail)==null?void 0:n.value;o&&this.handleOptionClick(o)}}
-					@touchstart=${this.handleTouchStart}
-					@touchmove=${this.preventScroll}
-					${j.color({bgColor:H.SchmancyTheme.sys.color.surface.container})}
-					@slotchange=${this.handleSlotChange}
-				>
-					<!-- "No results" option -->
-					<li id="empty" tabindex="-1">
-						<schmancy-typography type="label">No results found</schmancy-typography>
-					</li>
-					<!-- Slot for the <schmancy-option> elements -->
-					<slot></slot>
-				</ul>
-			</div>
-		`}};d([u.property({type:Boolean})],c.prototype,"required",2),d([u.property({type:String})],c.prototype,"placeholder",2),d([u.property({type:String,reflect:!0})],c.prototype,"value",2),d([u.property({type:String,reflect:!0})],c.prototype,"label",2),d([u.property({type:String})],c.prototype,"maxHeight",2),d([u.property({type:Boolean})],c.prototype,"multi",2),d([u.query("#options")],c.prototype,"optionsContainer",2),d([u.query("#empty")],c.prototype,"empty",2),d([u.query("schmancy-input")],c.prototype,"input",2),d([u.queryAssignedElements({flatten:!0})],c.prototype,"options",2),d([u.eventOptions({passive:!0})],c.prototype,"handleOptionClick",1),c=d([u.customElement("schmancy-autocomplete")],c);
-//# sourceMappingURL=autocomplete-BU0sC_l-.cjs.map