@ds-autonomie/web-components 1.0.1

package/dist/internal/form.d.ts

@@ -0,0 +1,73 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type SlButton from '../components/button/button';
+import type { ShoelaceFormControl } from '../internal/shoelace-element';
+export declare const formCollections: WeakMap<HTMLFormElement, Set<ShoelaceFormControl>>;
+export interface FormControlControllerOptions {
+    /** A function that returns the form containing the form control. */
+    form: (input: ShoelaceFormControl) => HTMLFormElement | null;
+    /** A function that returns the form control's name, which will be submitted with the form data. */
+    name: (input: ShoelaceFormControl) => string;
+    /** A function that returns the form control's current value. */
+    value: (input: ShoelaceFormControl) => unknown | unknown[];
+    /** A function that returns the form control's default value. */
+    defaultValue: (input: ShoelaceFormControl) => unknown | unknown[];
+    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+    disabled: (input: ShoelaceFormControl) => boolean;
+    /**
+     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
+     * prevent submission and trigger the browser's constraint violation warning.
+     */
+    reportValidity: (input: ShoelaceFormControl) => boolean;
+    /** A function that sets the form control's value */
+    setValue: (input: ShoelaceFormControl, value: unknown) => void;
+    /**
+     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
+     * states such as user-valid and user-invalid.user interacted validity states. */
+    assumeInteractionOn: string[];
+}
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+export declare class FormControlController implements ReactiveController {
+    host: ShoelaceFormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    constructor(host: ReactiveControllerHost & ShoelaceFormControl, options?: Partial<FormControlControllerOptions | unknown>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter?: HTMLInputElement | SlButton): void;
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter?: HTMLInputElement | SlButton): void;
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid: boolean): void;
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity(): void;
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `dsa-invalid`.
+     * If the `dsa-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `dsa-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+export declare const validValidityState: ValidityState;
+export declare const valueMissingValidityState: ValidityState;
+export declare const customErrorValidityState: ValidityState;

package/dist/internal/form.js

@@ -0,0 +1,328 @@
+//
+// We store a WeakMap of forms + controls so we can keep references to all Shoelace controls within a given form. As
+// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is
+// added and removed from the form's set, respectively.
+//
+export const formCollections = new WeakMap();
+//
+// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and
+// restore the original behavior when they disconnect.
+//
+const reportValidityOverloads = new WeakMap();
+//
+// We store a Set of controls that users have interacted with. This allows us to determine the interaction state
+// without littering the DOM with additional data attributes.
+//
+const userInteractedControls = new WeakSet();
+//
+// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.
+//
+const interactions = new WeakMap();
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+export class FormControlController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this.options = Object.assign({ form: (input) => {
+                // If there's a form attribute, use it to find the target form by id
+                if (input.hasAttribute('form') && input.getAttribute('form') !== '') {
+                    const root = input.getRootNode();
+                    const formId = input.getAttribute('form');
+                    if (formId) {
+                        return root.getElementById(formId);
+                    }
+                }
+                return input.closest('form');
+            }, name: (input) => input.name, value: (input) => input.value, defaultValue: (input) => input.defaultValue, disabled: (input) => { var _a; return (_a = input.disabled) !== null && _a !== void 0 ? _a : false; }, reportValidity: (input) => typeof input.reportValidity === 'function'
+                ? input.reportValidity()
+                : true, 
+            // TODO: Decide if using unknown here is a good decision
+            setValue: (input, value) => (input.value = value), assumeInteractionOn: ['dsa-input'] }, options);
+        this.handleFormData = this.handleFormData.bind(this);
+        this.handleFormSubmit = this.handleFormSubmit.bind(this);
+        this.handleFormReset = this.handleFormReset.bind(this);
+        this.reportFormValidity = this.reportFormValidity.bind(this);
+        this.handleInteraction = this.handleInteraction.bind(this);
+    }
+    hostConnected() {
+        const form = this.options.form(this.host);
+        if (form) {
+            this.attachForm(form);
+        }
+        // Listen for interactions
+        interactions.set(this.host, []);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.addEventListener(event, this.handleInteraction);
+        });
+    }
+    hostDisconnected() {
+        this.detachForm();
+        // Clean up interactions
+        interactions.delete(this.host);
+        this.options.assumeInteractionOn.forEach((event) => {
+            this.host.removeEventListener(event, this.handleInteraction);
+        });
+    }
+    hostUpdated() {
+        const form = this.options.form(this.host);
+        // Detach if the form no longer exists
+        if (!form) {
+            this.detachForm();
+        }
+        // If the form has changed, reattach it
+        if (form && this.form !== form) {
+            this.detachForm();
+            this.attachForm(form);
+        }
+        if (this.host.hasUpdated) {
+            this.setValidity(this.host.validity.valid);
+        }
+    }
+    attachForm(form) {
+        if (form) {
+            this.form = form;
+            // Add this element to the form's collection
+            if (formCollections.has(this.form)) {
+                formCollections.get(this.form).add(this.host);
+            }
+            else {
+                formCollections.set(this.form, new Set([this.host]));
+            }
+            this.form.addEventListener('formdata', this.handleFormData);
+            this.form.addEventListener('submit', this.handleFormSubmit);
+            this.form.addEventListener('reset', this.handleFormReset);
+            // Overload the form's reportValidity() method so it looks at Shoelace form controls
+            if (!reportValidityOverloads.has(this.form)) {
+                reportValidityOverloads.set(this.form, this.form.reportValidity);
+                this.form.reportValidity = () => this.reportFormValidity();
+            }
+        }
+        else {
+            this.form = undefined;
+        }
+    }
+    detachForm() {
+        var _a;
+        if (this.form) {
+            // Remove this element from the form's collection
+            (_a = formCollections.get(this.form)) === null || _a === void 0 ? void 0 : _a.delete(this.host);
+            this.form.removeEventListener('formdata', this.handleFormData);
+            this.form.removeEventListener('submit', this.handleFormSubmit);
+            this.form.removeEventListener('reset', this.handleFormReset);
+            // Remove the overload and restore the original method
+            if (reportValidityOverloads.has(this.form)) {
+                this.form.reportValidity = reportValidityOverloads.get(this.form);
+                reportValidityOverloads.delete(this.form);
+            }
+        }
+        this.form = undefined;
+    }
+    handleFormData(event) {
+        const disabled = this.options.disabled(this.host);
+        const name = this.options.name(this.host);
+        const value = this.options.value(this.host);
+        // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
+        // injecting the name/value on a temporary button, so we can just skip them here.
+        const isButton = this.host.tagName.toLowerCase() === 'dsa-button';
+        if (!disabled &&
+            !isButton &&
+            typeof name === 'string' &&
+            name.length > 0 &&
+            typeof value !== 'undefined') {
+            if (Array.isArray(value)) {
+                value.forEach((val) => {
+                    event.formData.append(name, val.toString());
+                });
+            }
+            else {
+                event.formData.append(name, value.toString());
+            }
+        }
+    }
+    handleFormSubmit(event) {
+        var _a;
+        const disabled = this.options.disabled(this.host);
+        const reportValidity = this.options.reportValidity;
+        // Update the interacted state for all controls when the form is submitted
+        if (this.form && !this.form.noValidate) {
+            (_a = formCollections.get(this.form)) === null || _a === void 0 ? void 0 : _a.forEach((control) => {
+                this.setUserInteracted(control, true);
+            });
+        }
+        if (this.form &&
+            !this.form.noValidate &&
+            !disabled &&
+            !reportValidity(this.host)) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    handleFormReset() {
+        this.options.setValue(this.host, this.options.defaultValue(this.host));
+        this.setUserInteracted(this.host, false);
+        interactions.set(this.host, []);
+    }
+    handleInteraction(event) {
+        const emittedEvents = interactions.get(this.host);
+        if (!emittedEvents.includes(event.type)) {
+            emittedEvents.push(event.type);
+        }
+        // Mark it as user-interacted as soon as all associated events have been emitted
+        if (emittedEvents.length === this.options.assumeInteractionOn.length) {
+            this.setUserInteracted(this.host, true);
+        }
+    }
+    reportFormValidity() {
+        //
+        // Shoelace form controls work hard to act like regular form controls. They support the Constraint Validation API
+        // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also
+        // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using
+        // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.
+        //
+        // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger
+        // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't
+        // be necessary once we can use ElementInternals.
+        //
+        // Note that we're also honoring the form's novalidate attribute.
+        //
+        if (this.form && !this.form.noValidate) {
+            // This seems sloppy, but checking all elements will cover native inputs, Shoelace inputs, and other custom
+            // elements that support the constraint validation API.
+            const elements = this.form.querySelectorAll('*');
+            for (const element of elements) {
+                if (typeof element.reportValidity === 'function') {
+                    if (!element.reportValidity()) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
+    setUserInteracted(el, hasInteracted) {
+        if (hasInteracted) {
+            userInteractedControls.add(el);
+        }
+        else {
+            userInteractedControls.delete(el);
+        }
+        el.requestUpdate();
+    }
+    doAction(type, submitter) {
+        if (this.form) {
+            const button = document.createElement('button');
+            button.type = type;
+            button.style.position = 'absolute';
+            button.style.width = '0';
+            button.style.height = '0';
+            button.style.clipPath = 'inset(50%)';
+            button.style.overflow = 'hidden';
+            button.style.whiteSpace = 'nowrap';
+            // Pass name, value, and form attributes through to the temporary button
+            if (submitter) {
+                button.name = submitter.name;
+                button.value = submitter.value;
+                [
+                    'formaction',
+                    'formenctype',
+                    'formmethod',
+                    'formnovalidate',
+                    'formtarget',
+                ].forEach((attr) => {
+                    if (submitter.hasAttribute(attr)) {
+                        button.setAttribute(attr, submitter.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm() {
+        var _a;
+        return (_a = this.form) !== null && _a !== void 0 ? _a : null;
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter) {
+        this.doAction('reset', submitter);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction('submit', submitter);
+    }
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid) {
+        const host = this.host;
+        const hasInteracted = Boolean(userInteractedControls.has(host));
+        const required = Boolean(host.required);
+        //
+        // We're mapping the following "states" to data attributes. In the future, we can use ElementInternals.states to
+        // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.
+        //
+        // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011
+        //
+        host.toggleAttribute('data-required', required);
+        host.toggleAttribute('data-optional', !required);
+        host.toggleAttribute('data-invalid', !isValid);
+        host.toggleAttribute('data-valid', isValid);
+        host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
+        host.toggleAttribute('data-user-valid', isValid && hasInteracted);
+    }
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity() {
+        const host = this.host;
+        this.setValidity(host.validity.valid);
+    }
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `dsa-invalid`.
+     * If the `dsa-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `dsa-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent) {
+        const slInvalidEvent = new CustomEvent('dsa-invalid', {
+            bubbles: false,
+            composed: false,
+            cancelable: true,
+            detail: {},
+        });
+        if (!originalInvalidEvent) {
+            slInvalidEvent.preventDefault();
+        }
+        if (!this.host.dispatchEvent(slInvalidEvent)) {
+            originalInvalidEvent === null || originalInvalidEvent === void 0 ? void 0 : originalInvalidEvent.preventDefault();
+        }
+    }
+}
+/*
+ * Predefined common validity states.
+ * All of them are read-only.
+ */
+// A validity state object that represents `valid`
+export const validValidityState = Object.freeze({
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valid: true,
+    valueMissing: false,
+});
+// A validity state object that represents `value missing`
+export const valueMissingValidityState = Object.freeze(Object.assign(Object.assign({}, validValidityState), { valid: false, valueMissing: true }));
+// A validity state object that represents a custom error
+export const customErrorValidityState = Object.freeze(Object.assign(Object.assign({}, validValidityState), { valid: false, customError: true }));

package/dist/internal/math.d.ts

@@ -0,0 +1,2 @@
+/** Ensures a number stays within a minimum and maximum value */
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/internal/math.js

@@ -0,0 +1,11 @@
+/** Ensures a number stays within a minimum and maximum value */
+export function clamp(value, min, max) {
+    const noNegativeZero = (n) => (Object.is(n, -0) ? 0 : n);
+    if (value < min) {
+        return noNegativeZero(min);
+    }
+    if (value > max) {
+        return noNegativeZero(max);
+    }
+    return noNegativeZero(value);
+}

package/dist/internal/modal.d.ts

@@ -0,0 +1,12 @@
+export default class Modal {
+    element: HTMLElement;
+    tabDirection: 'forward' | 'backward';
+    constructor(element: HTMLElement);
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+    checkFocus(): void;
+    handleFocusIn(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(): void;
+}

package/dist/internal/modal.js

@@ -0,0 +1,51 @@
+import { getTabbableBoundary } from './tabbable';
+let activeModals = [];
+export default class Modal {
+    constructor(element) {
+        this.tabDirection = 'forward';
+        this.element = element;
+        this.handleFocusIn = this.handleFocusIn.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleKeyUp = this.handleKeyUp.bind(this);
+    }
+    activate() {
+        activeModals.push(this.element);
+        document.addEventListener('focusin', this.handleFocusIn);
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.addEventListener('keyup', this.handleKeyUp);
+    }
+    deactivate() {
+        activeModals = activeModals.filter((modal) => modal !== this.element);
+        document.removeEventListener('focusin', this.handleFocusIn);
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.removeEventListener('keyup', this.handleKeyUp);
+    }
+    isActive() {
+        // The "active" modal is always the most recent one shown
+        return activeModals[activeModals.length - 1] === this.element;
+    }
+    checkFocus() {
+        if (this.isActive()) {
+            if (!this.element.matches(':focus-within')) {
+                const { start, end } = getTabbableBoundary(this.element);
+                const target = this.tabDirection === 'forward' ? start : end;
+                if (typeof (target === null || target === void 0 ? void 0 : target.focus) === 'function') {
+                    target.focus({ preventScroll: true });
+                }
+            }
+        }
+    }
+    handleFocusIn() {
+        this.checkFocus();
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Tab' && event.shiftKey) {
+            this.tabDirection = 'backward';
+            // Ensure focus remains trapped after the key is pressed
+            requestAnimationFrame(() => this.checkFocus());
+        }
+    }
+    handleKeyUp() {
+        this.tabDirection = 'forward';
+    }
+}

package/dist/internal/offset.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+ * parent doesn't have to be positioned relative or absolute.
+ *
+ * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems
+ * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+ */
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    top: number;
+    left: number;
+};

package/dist/internal/offset.js

@@ -0,0 +1,13 @@
+/**
+ * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+ * parent doesn't have to be positioned relative or absolute.
+ *
+ * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems
+ * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+ */
+export function getOffset(element, parent) {
+    return {
+        top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+        left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),
+    };
+}

package/dist/internal/scroll.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;

package/dist/internal/scroll.js

@@ -0,0 +1,63 @@
+import { getOffset } from './offset';
+const locks = new Set();
+/** Returns the width of the document's scrollbar */
+function getScrollbarWidth() {
+    const documentWidth = document.documentElement.clientWidth;
+    return Math.abs(window.innerWidth - documentWidth);
+}
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export function lockBodyScrolling(lockingEl) {
+    locks.add(lockingEl);
+    // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from
+    // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.
+    if (!document.body.classList.contains('dsa-scroll-lock')) {
+        const scrollbarWidth = getScrollbarWidth(); // must be measured before the `dsa-scroll-lock` class is applied
+        document.body.classList.add('dsa-scroll-lock');
+        document.body.style.setProperty('--dsa-wc-scroll-lock-size', `${scrollbarWidth}px`);
+    }
+}
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export function unlockBodyScrolling(lockingEl) {
+    locks.delete(lockingEl);
+    if (locks.size === 0) {
+        document.body.classList.remove('dsa-scroll-lock');
+        document.body.style.removeProperty('--dsa-wc-scroll-lock-size');
+    }
+}
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
+export function scrollIntoView(element, container, direction = 'vertical', behavior = 'smooth') {
+    const offset = getOffset(element, container);
+    const offsetTop = offset.top + container.scrollTop;
+    const offsetLeft = offset.left + container.scrollLeft;
+    const minX = container.scrollLeft;
+    const maxX = container.scrollLeft + container.offsetWidth;
+    const minY = container.scrollTop;
+    const maxY = container.scrollTop + container.offsetHeight;
+    if (direction === 'horizontal' || direction === 'both') {
+        if (offsetLeft < minX) {
+            container.scrollTo({ left: offsetLeft, behavior });
+        }
+        else if (offsetLeft + element.clientWidth > maxX) {
+            container.scrollTo({
+                left: offsetLeft - container.offsetWidth + element.clientWidth,
+                behavior,
+            });
+        }
+    }
+    if (direction === 'vertical' || direction === 'both') {
+        if (offsetTop < minY) {
+            container.scrollTo({ top: offsetTop, behavior });
+        }
+        else if (offsetTop + element.clientHeight > maxY) {
+            container.scrollTo({
+                top: offsetTop - container.offsetHeight + element.clientHeight,
+                behavior,
+            });
+        }
+    }
+}

package/dist/internal/shoelace-element.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+type EventTypeRequiresDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? never : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? never : T : never : never;
+type EventTypeDoesNotRequireDetail<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? T : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? T : never : T : T;
+type EventTypesWithRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeRequiresDetail<EventType>]: true;
+};
+type EventTypesWithoutRequiredDetail = {
+    [EventType in keyof GlobalEventHandlersEventMap as EventTypeDoesNotRequireDetail<EventType>]: true;
+};
+type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+type SlEventInit<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, unknown>> ? GlobalEventHandlersEventMap[T] extends CustomEvent<Record<PropertyKey, never>> ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : Partial<GlobalEventHandlersEventMap[T]['detail']> extends GlobalEventHandlersEventMap[T]['detail'] ? CustomEventInit<GlobalEventHandlersEventMap[T]['detail']> : WithRequired<CustomEventInit<GlobalEventHandlersEventMap[T]['detail']>, 'detail'> : CustomEventInit : CustomEventInit;
+type GetCustomEventType<T> = T extends keyof GlobalEventHandlersEventMap ? GlobalEventHandlersEventMap[T] extends CustomEvent<unknown> ? GlobalEventHandlersEventMap[T] : CustomEvent<unknown> : CustomEvent<unknown>;
+export declare class ShoelaceElement extends LitElement {
+    dir: string;
+    lang: string;
+    /** Emits a custom event with more convenient defaults. */
+    emit<T extends string & keyof EventTypesWithoutRequiredDetail>(name: EventTypeDoesNotRequireDetail<T>, options?: SlEventInit<T> | undefined): GetCustomEventType<T>;
+    emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: SlEventInit<T>): GetCustomEventType<T>;
+}
+export interface ShoelaceFormControl extends ShoelaceElement {
+    name: string;
+    value: unknown;
+    disabled?: boolean;
+    defaultValue?: unknown;
+    defaultChecked?: boolean;
+    form?: string;
+    pattern?: string;
+    min?: number | string | Date;
+    max?: number | string | Date;
+    step?: number | 'any';
+    required?: boolean;
+    minlength?: number;
+    maxlength?: number;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    checkValidity: () => boolean;
+    getForm: () => HTMLFormElement | null;
+    reportValidity: () => boolean;
+    setCustomValidity: (message: string) => void;
+}
+export {};

package/dist/internal/shoelace-element.js

@@ -0,0 +1,21 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+export class ShoelaceElement extends LitElement {
+    emit(name, options) {
+        const event = new CustomEvent(name, Object.assign({ bubbles: true, cancelable: false, composed: true, detail: {} }, options));
+        this.dispatchEvent(event);
+        return event;
+    }
+}
+__decorate([
+    property()
+], ShoelaceElement.prototype, "dir", void 0);
+__decorate([
+    property()
+], ShoelaceElement.prototype, "lang", void 0);