@redvars/peacock 3.8.0 → 3.8.2

package/dist/form-associated-BXADnjOB.js

@@ -0,0 +1,388 @@
+import { _ as __decorate } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { i as internals } from './element-internals-2CMts_0M.js';
+
+/**
+ * A symbol used to access dispatch hooks on an event.
+ */
+const dispatchHooks = Symbol('dispatchHooks');
+/**
+ * Add a hook for an event that is called after the event is dispatched and
+ * propagates to other event listeners.
+ *
+ * This is useful for behaviors that need to check if an event is canceled.
+ *
+ * The callback is invoked synchronously, which allows for better integration
+ * with synchronous platform APIs (like `<form>` or `<label>` clicking).
+ *
+ * Note: `setupDispatchHooks()` must be called on the element before adding any
+ * other event listeners. Call it in the constructor of an element or
+ * controller.
+ *
+ * @example
+ * ```ts
+ * class MyControl extends LitElement {
+ *   constructor() {
+ *     super();
+ *     setupDispatchHooks(this, 'click');
+ *     this.addEventListener('click', event => {
+ *       afterDispatch(event, () => {
+ *         if (event.defaultPrevented) {
+ *           return
+ *         }
+ *
+ *         // ... perform logic
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```ts
+ * class MyController implements ReactiveController {
+ *   constructor(host: ReactiveElement) {
+ *     // setupDispatchHooks() may be called multiple times for the same
+ *     // element and events, making it safe for multiple controllers to use it.
+ *     setupDispatchHooks(host, 'click');
+ *     host.addEventListener('click', event => {
+ *       afterDispatch(event, () => {
+ *         if (event.defaultPrevented) {
+ *           return;
+ *         }
+ *
+ *         // ... perform logic
+ *       });
+ *     });
+ *   }
+ * }
+ * ```
+ *
+ * @param event The event to add a hook to.
+ * @param callback A hook that is called after the event finishes dispatching.
+ */
+function afterDispatch(event, callback) {
+    const hooks = event[dispatchHooks];
+    if (!hooks) {
+        throw new Error(`'${event.type}' event needs setupDispatchHooks().`);
+    }
+    hooks.addEventListener('after', callback, { once: true });
+}
+/**
+ * A lookup map of elements and event types that have a dispatch hook listener
+ * set up. Used to ensure we don't set up multiple hook listeners on the same
+ * element for the same event.
+ */
+const ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap();
+/**
+ * Sets up an element to add dispatch hooks to given event types. This must be
+ * called before adding any event listeners that need to use dispatch hooks
+ * like `afterDispatch()`.
+ *
+ * This function is safe to call multiple times with the same element or event
+ * types. Call it in the constructor of elements, mixins, and controllers to
+ * ensure it is set up before external listeners.
+ *
+ * @example
+ * ```ts
+ * class MyControl extends LitElement {
+ *   constructor() {
+ *     super();
+ *     setupDispatchHooks(this, 'click');
+ *     this.addEventListener('click', this.listenerUsingAfterDispatch);
+ *   }
+ * }
+ * ```
+ *
+ * @param element The element to set up event dispatch hooks for.
+ * @param eventTypes The event types to add dispatch hooks to.
+ */
+function setupDispatchHooks(element, ...eventTypes) {
+    let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);
+    if (!typesAlreadySetUp) {
+        typesAlreadySetUp = new Set();
+        ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);
+    }
+    for (const eventType of eventTypes) {
+        // Don't register multiple dispatch hook listeners. A second registration
+        // would lead to the second listener calling `afterDispatch()` hooks twice.
+        if (typesAlreadySetUp.has(eventType)) {
+            continue;
+        }
+        element.addEventListener(eventType, (event) => {
+            // Add hooks onto the event.
+            const hooks = new EventTarget();
+            event[dispatchHooks] = hooks;
+            const cleanupLastNodeListener = new AbortController();
+            const callAfterDispatch = () => {
+                cleanupLastNodeListener.abort();
+                hooks.dispatchEvent(new Event('after'));
+            };
+            const patchStopPropagation = (superMethod) => {
+                return function () {
+                    superMethod.call(this);
+                    // Synchronously call afterDispatch() hooks when interrupted.
+                    callAfterDispatch();
+                };
+            };
+            event.stopPropagation = patchStopPropagation(event.stopPropagation);
+            event.stopImmediatePropagation = patchStopPropagation(event.stopImmediatePropagation);
+            // Add an event listener to detect the end of the event's propagation.
+            const composedPath = event.composedPath();
+            let lastNodeForEvent;
+            if (event.composed && event.bubbles) {
+                lastNodeForEvent = composedPath[composedPath.length - 1];
+            }
+            else if (!event.bubbles) {
+                lastNodeForEvent = composedPath[0];
+            }
+            else {
+                lastNodeForEvent = composedPath[0].getRootNode();
+            }
+            lastNodeForEvent.addEventListener(eventType, () => {
+                // Synchronously call afterDispatch() hooks.
+                callAfterDispatch();
+            }, { once: true, signal: cleanupLastNodeListener.signal });
+        }, {
+            // Ensure this listener runs before other listeners.
+            // `setupDispatchHooks()` should be called in constructors to also
+            // ensure they run before any other externally-added capture listeners.
+            capture: true,
+        });
+        typesAlreadySetUp.add(eventType);
+    }
+}
+
+/**
+ * Mixes in form submitter behavior for a class.
+ *
+ * A click listener is added to each element instance. If the click is not
+ * default prevented, it will submit the element's form, if any.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormSubmitter(mixinElementInternals(LitElement));
+ * class MyButton extends base {
+ *   static formAssociated = true;
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `FormSubmitter` mixed in.
+ */
+function mixinFormSubmitter(base) {
+    class FormSubmitterElement extends base {
+        // Name attribute must reflect synchronously for form integration.
+        get name() {
+            return this.getAttribute('name') ?? '';
+        }
+        set name(name) {
+            this.setAttribute('name', name);
+        }
+        // Mixins must have a constructor with `...args: any[]`
+        // tslint:disable-next-line:no-any
+        constructor(...args) {
+            super(...args);
+            this.type = 'submit';
+            this.value = '';
+            setupDispatchHooks(this, 'click');
+            this.addEventListener('click', async (event) => {
+                const isReset = this.type === 'reset';
+                const isSubmit = this.type === 'submit';
+                const elementInternals = this[internals];
+                const { form } = elementInternals;
+                if (!form || !(isSubmit || isReset)) {
+                    return;
+                }
+                afterDispatch(event, () => {
+                    if (event.defaultPrevented) {
+                        return;
+                    }
+                    if (isReset) {
+                        form.reset();
+                        return;
+                    }
+                    // form.requestSubmit(submitter) does not work with form associated custom
+                    // elements. This patches the dispatched submit event to add the correct
+                    // `submitter`.
+                    // See https://github.com/WICG/webcomponents/issues/814
+                    form.addEventListener('submit', (submitEvent) => {
+                        Object.defineProperty(submitEvent, 'submitter', {
+                            configurable: true,
+                            enumerable: true,
+                            get: () => this,
+                        });
+                    }, { capture: true, once: true });
+                    elementInternals.setFormValue(this.value);
+                    form.requestSubmit();
+                });
+            });
+        }
+    }
+    __decorate([
+        n()
+    ], FormSubmitterElement.prototype, "type", void 0);
+    __decorate([
+        n({ reflect: true })
+    ], FormSubmitterElement.prototype, "value", void 0);
+    return FormSubmitterElement;
+}
+
+/**
+ * A symbol property to retrieve the form value for an element.
+ */
+const getFormValue = Symbol('getFormValue');
+/**
+ * A symbol property to retrieve the form state for an element.
+ */
+const getFormState = Symbol('getFormState');
+/**
+ * Mixes in form-associated behavior for a class. This allows an element to add
+ * values to `<form>` elements.
+ *
+ * Implementing classes should provide a `[formValue]` to return the current
+ * value of the element, as well as reset and restore callbacks.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyControl extends base {
+ *   \@property()
+ *   value = '';
+ *
+ *   override [getFormValue]() {
+ *     return this.value;
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.getAttribute('value');
+ *     this.value = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.value = state;
+ *   }
+ * }
+ * ```
+ *
+ * Elements may optionally provide a `[formState]` if their values do not
+ * represent the state of the component.
+ *
+ * @example
+ * ```ts
+ * const base = mixinFormAssociated(mixinElementInternals(LitElement));
+ *
+ * class MyCheckbox extends base {
+ *   \@property()
+ *   value = 'on';
+ *
+ *   \@property({type: Boolean})
+ *   checked = false;
+ *
+ *   override [getFormValue]() {
+ *     return this.checked ? this.value : null;
+ *   }
+ *
+ *   override [getFormState]() {
+ *     return String(this.checked);
+ *   }
+ *
+ *   override formResetCallback() {
+ *     const defaultValue = this.hasAttribute('checked');
+ *     this.checked = defaultValue;
+ *   }
+ *
+ *   override formStateRestoreCallback(state: string) {
+ *     this.checked = Boolean(state);
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into. The base class must use
+ *     `mixinElementInternals()`.
+ * @return The provided class with `FormAssociated` mixed in.
+ */
+function mixinFormAssociated(base) {
+    class FormAssociatedElement extends base {
+        get form() {
+            return this[internals].form;
+        }
+        get labels() {
+            return this[internals].labels;
+        }
+        // Use @property for the `name` and `disabled` properties to add them to the
+        // `observedAttributes` array and trigger `attributeChangedCallback()`.
+        //
+        // We don't use Lit's default getter/setter (`noAccessor: true`) because
+        // the attributes need to be updated synchronously to work with synchronous
+        // form APIs, and Lit updates attributes async by default.
+        get name() {
+            return this.getAttribute('name') ?? '';
+        }
+        set name(name) {
+            // Note: setting name to null or empty does not remove the attribute.
+            this.setAttribute('name', name);
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
+        }
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
+        set disabled(disabled) {
+            // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or
+            // `undefined` sets the attribute to `false`.
+            this.toggleAttribute('disabled', Boolean(disabled));
+            // We don't need to call `requestUpdate()` since it's called synchronously
+            // in `attributeChangedCallback()`.
+        }
+        attributeChangedCallback(name, old, value) {
+            // Manually `requestUpdate()` for `name` and `disabled` when their
+            // attribute or property changes.
+            // The properties update their attributes, so this callback is invoked
+            // immediately when the properties are set. We call `requestUpdate()` here
+            // instead of letting Lit set the properties from the attribute change.
+            // That would cause the properties to re-set the attribute and invoke this
+            // callback again in a loop. This leads to stale state when Lit tries to
+            // determine if a property changed or not.
+            if (name === 'name' || name === 'disabled') {
+                // Disabled's value is only false if the attribute is missing and null.
+                const oldValue = name === 'disabled' ? old !== null : old;
+                // Trigger a lit update when the attribute changes.
+                this.requestUpdate(name, oldValue);
+                return;
+            }
+            super.attributeChangedCallback(name, old, value);
+        }
+        requestUpdate(name, oldValue, options) {
+            super.requestUpdate(name, oldValue, options);
+            // If any properties change, update the form value, which may have changed
+            // as well.
+            // Update the form value synchronously in `requestUpdate()` rather than
+            // `update()` or `updated()`, which are async. This is necessary to ensure
+            // that form data is updated in time for synchronous event listeners.
+            this[internals].setFormValue(this[getFormValue](), this[getFormState]());
+        }
+        [getFormValue]() {
+            return this.getAttribute('value');
+        }
+        [getFormState]() {
+            return this[getFormValue]();
+        }
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+    }
+    /** @nocollapse */
+    FormAssociatedElement.formAssociated = true;
+    __decorate([
+        n({ noAccessor: true })
+    ], FormAssociatedElement.prototype, "name", null);
+    __decorate([
+        n({ type: Boolean, noAccessor: true })
+    ], FormAssociatedElement.prototype, "disabled", null);
+    return FormAssociatedElement;
+}
+
+export { mixinFormAssociated as a, mixinFormSubmitter as m };
+//# sourceMappingURL=form-associated-BXADnjOB.js.map

package/dist/form-associated-BXADnjOB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-associated-BXADnjOB.js","sources":["../../src/__internal/events/dispatch-hooks.ts","../../src/__internal/mixins/form-submitter.ts","../../src/__internal/mixins/form-associated.ts"],"sourcesContent":["/**\n * A symbol used to access dispatch hooks on an event.\n */\nconst dispatchHooks = Symbol('dispatchHooks');\n\n/**\n * An `Event` with additional symbols for dispatch hooks.\n */\ninterface EventWithDispatchHooks extends Event {\n  [dispatchHooks]: EventTarget;\n}\n\n/**\n * Add a hook for an event that is called after the event is dispatched and\n * propagates to other event listeners.\n *\n * This is useful for behaviors that need to check if an event is canceled.\n *\n * The callback is invoked synchronously, which allows for better integration\n * with synchronous platform APIs (like `<form>` or `<label>` clicking).\n *\n * Note: `setupDispatchHooks()` must be called on the element before adding any\n * other event listeners. Call it in the constructor of an element or\n * controller.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n *   constructor() {\n *     super();\n *     setupDispatchHooks(this, 'click');\n *     this.addEventListener('click', event => {\n *       afterDispatch(event, () => {\n *         if (event.defaultPrevented) {\n *           return\n *         }\n *\n *         // ... perform logic\n *       });\n *     });\n *   }\n * }\n * ```\n *\n * @example\n * ```ts\n * class MyController implements ReactiveController {\n *   constructor(host: ReactiveElement) {\n *     // setupDispatchHooks() may be called multiple times for the same\n *     // element and events, making it safe for multiple controllers to use it.\n *     setupDispatchHooks(host, 'click');\n *     host.addEventListener('click', event => {\n *       afterDispatch(event, () => {\n *         if (event.defaultPrevented) {\n *           return;\n *         }\n *\n *         // ... perform logic\n *       });\n *     });\n *   }\n * }\n * ```\n *\n * @param event The event to add a hook to.\n * @param callback A hook that is called after the event finishes dispatching.\n */\nexport function afterDispatch(event: Event, callback: () => void) {\n  const hooks = (event as EventWithDispatchHooks)[dispatchHooks];\n  if (!hooks) {\n    throw new Error(`'${event.type}' event needs setupDispatchHooks().`);\n  }\n\n  hooks.addEventListener('after', callback, { once: true });\n}\n\n/**\n * A lookup map of elements and event types that have a dispatch hook listener\n * set up. Used to ensure we don't set up multiple hook listeners on the same\n * element for the same event.\n */\nconst ELEMENT_DISPATCH_HOOK_TYPES = new WeakMap<Element, Set<string>>();\n\n/**\n * Sets up an element to add dispatch hooks to given event types. This must be\n * called before adding any event listeners that need to use dispatch hooks\n * like `afterDispatch()`.\n *\n * This function is safe to call multiple times with the same element or event\n * types. Call it in the constructor of elements, mixins, and controllers to\n * ensure it is set up before external listeners.\n *\n * @example\n * ```ts\n * class MyControl extends LitElement {\n *   constructor() {\n *     super();\n *     setupDispatchHooks(this, 'click');\n *     this.addEventListener('click', this.listenerUsingAfterDispatch);\n *   }\n * }\n * ```\n *\n * @param element The element to set up event dispatch hooks for.\n * @param eventTypes The event types to add dispatch hooks to.\n */\nexport function setupDispatchHooks(\n  element: Element,\n  ...eventTypes: [string, ...string[]]\n) {\n  let typesAlreadySetUp = ELEMENT_DISPATCH_HOOK_TYPES.get(element);\n  if (!typesAlreadySetUp) {\n    typesAlreadySetUp = new Set();\n    ELEMENT_DISPATCH_HOOK_TYPES.set(element, typesAlreadySetUp);\n  }\n\n  for (const eventType of eventTypes) {\n    // Don't register multiple dispatch hook listeners. A second registration\n    // would lead to the second listener calling `afterDispatch()` hooks twice.\n    if (typesAlreadySetUp.has(eventType)) {\n      continue;\n    }\n\n    element.addEventListener(\n      eventType,\n      (event: Event) => {\n        // Add hooks onto the event.\n        const hooks = new EventTarget();\n        (event as EventWithDispatchHooks)[dispatchHooks] = hooks;\n\n        const cleanupLastNodeListener = new AbortController();\n        const callAfterDispatch = () => {\n          cleanupLastNodeListener.abort();\n          hooks.dispatchEvent(new Event('after'));\n        };\n\n        const patchStopPropagation = (\n          superMethod: Event['stopPropagation'],\n        ) => {\n          return function (this: Event) {\n            superMethod.call(this);\n            // Synchronously call afterDispatch() hooks when interrupted.\n            callAfterDispatch();\n          };\n        };\n\n        event.stopPropagation = patchStopPropagation(event.stopPropagation);\n        event.stopImmediatePropagation = patchStopPropagation(\n          event.stopImmediatePropagation,\n        );\n\n        // Add an event listener to detect the end of the event's propagation.\n        const composedPath = event.composedPath();\n        let lastNodeForEvent: EventTarget;\n        if (event.composed && event.bubbles) {\n          lastNodeForEvent = composedPath[composedPath.length - 1];\n        } else if (!event.bubbles) {\n          lastNodeForEvent = composedPath[0];\n        } else {\n          lastNodeForEvent = (composedPath[0] as Element).getRootNode();\n        }\n\n        lastNodeForEvent.addEventListener(\n          eventType,\n          () => {\n            // Synchronously call afterDispatch() hooks.\n            callAfterDispatch();\n          },\n          { once: true, signal: cleanupLastNodeListener.signal },\n        );\n      },\n      {\n        // Ensure this listener runs before other listeners.\n        // `setupDispatchHooks()` should be called in constructors to also\n        // ensure they run before any other externally-added capture listeners.\n        capture: true,\n      },\n    );\n\n    typesAlreadySetUp.add(eventType);\n  }\n}\n","import { isServer, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { afterDispatch, setupDispatchHooks } from '../events/dispatch-hooks.js';\nimport { internals, WithElementInternals } from './element-internals.js';\nimport { MixinBase, MixinReturn } from './mixin.js';\n\n/**\n * A string indicating the form submission behavior of the element.\n *\n * - submit: The element submits the form. This is the default value if the\n * attribute is not specified, or if it is dynamically changed to an empty or\n * invalid value.\n * - reset: The element resets the form.\n * - button: The element does nothing.\n */\nexport type FormSubmitterType = 'button' | 'submit' | 'reset';\n\n/**\n * An element that can submit or reset a `<form>`, similar to\n * `<button type=\"submit\">`.\n */\nexport interface FormSubmitter {\n  /**\n   * A string indicating the form submission behavior of the element.\n   *\n   * - submit: The element submits the form. This is the default value if the\n   * attribute is not specified, or if it is dynamically changed to an empty or\n   * invalid value.\n   * - reset: The element resets the form.\n   * - button: The element does nothing.\n   */\n  type: string;\n\n  /**\n   * The HTML name to use in form submission. When combined with a `value`, the\n   * submitting button's name/value will be added to the form.\n   *\n   * Names must reflect to a `name` attribute for form integration.\n   */\n  name: string;\n\n  /**\n   * The value of the button. When combined with a `name`, the submitting\n   * button's name/value will be added to the form.\n   */\n  value: string;\n}\n\n/**\n * Mixes in form submitter behavior for a class.\n *\n * A click listener is added to each element instance. If the click is not\n * default prevented, it will submit the element's form, if any.\n *\n * @example\n * ```ts\n * const base = mixinFormSubmitter(mixinElementInternals(LitElement));\n * class MyButton extends base {\n *   static formAssociated = true;\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `FormSubmitter` mixed in.\n */\nexport function mixinFormSubmitter<\n  T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T, FormSubmitter> {\n  abstract class FormSubmitterElement extends base implements FormSubmitter {\n    @property() type = 'submit';\n\n    @property({ reflect: true }) value = '';\n\n    // Name attribute must reflect synchronously for form integration.\n    get name() {\n      return this.getAttribute('name') ?? '';\n    }\n\n    set name(name: string) {\n      this.setAttribute('name', name);\n    }\n\n    // Mixins must have a constructor with `...args: any[]`\n    // tslint:disable-next-line:no-any\n    constructor(...args: any[]) {\n      super(...args);\n      if (isServer) return;\n      setupDispatchHooks(this, 'click');\n      this.addEventListener('click', async (event: Event) => {\n        const isReset = this.type === 'reset';\n        const isSubmit = this.type === 'submit';\n        const elementInternals = this[internals];\n        const { form } = elementInternals;\n        if (!form || !(isSubmit || isReset)) {\n          return;\n        }\n\n        afterDispatch(event, () => {\n          if (event.defaultPrevented) {\n            return;\n          }\n\n          if (isReset) {\n            form.reset();\n            return;\n          }\n\n          // form.requestSubmit(submitter) does not work with form associated custom\n          // elements. This patches the dispatched submit event to add the correct\n          // `submitter`.\n          // See https://github.com/WICG/webcomponents/issues/814\n          form.addEventListener(\n            'submit',\n            (submitEvent: Event) => {\n              Object.defineProperty(submitEvent, 'submitter', {\n                configurable: true,\n                enumerable: true,\n                get: () => this,\n              });\n            },\n            { capture: true, once: true },\n          );\n\n          elementInternals.setFormValue(this.value);\n          form.requestSubmit();\n        });\n      });\n    }\n  }\n\n  return FormSubmitterElement;\n}\n","import { LitElement, PropertyDeclaration } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { internals, WithElementInternals } from './element-internals.js';\nimport { MixinBase, MixinReturn } from './mixin.js';\n\n/**\n * A form-associated element.\n */\nexport interface FormAssociated {\n  /**\n   * The associated form element with which this element's value will submit.\n   */\n  readonly form: HTMLFormElement | null;\n\n  /**\n   * The labels this element is associated with.\n   */\n  readonly labels: NodeList;\n\n  /**\n   * The HTML name to use in form submission.\n   */\n  name: string;\n\n  /**\n   * Whether or not the element is disabled.\n   */\n  disabled: boolean;\n\n  /**\n   * Gets the current form value of a component. Defaults to the component's\n   * `value` attribute.\n   *\n   * @return The current form value.\n   */\n  [getFormValue](): FormValue | null;\n\n  /**\n   * Gets the current form state of a component. Defaults to the component's\n   * `[getFormValue]()` result.\n   *\n   * Use this when the state of an element is different from its value, such as\n   * checkboxes (internal boolean state and a user string value).\n   *\n   * @return The current form state, defaults to the form value.\n   */\n  [getFormState](): FormValue | null;\n\n  /**\n   * A callback for when a form component should be disabled or enabled. This\n   * can be called in a variety of situations, such as disabled `<fieldset>`s.\n   *\n   * @param disabled Whether or not the form control should be disabled.\n   */\n  formDisabledCallback(disabled: boolean): void;\n\n  /**\n   * An optional callback for when the form requests to reset its value.\n   * Typically, the default value that is reset is represented in the attribute\n   * of an element.\n   *\n   * This means the attribute used for the value should not update as the value\n   * changes. For example, a checkbox should not change its default `checked`\n   * attribute when selected. Ensure form values do not reflect.\n   */\n  formResetCallback?(): void;\n\n  /**\n   * An optional callback for when the form restores the state of a component.\n   * For example, when a page is reloaded or forms are autofilled.\n   *\n   * @param state The state to restore, or null to reset the form control's\n   *     value.\n   * @param reason The reason state was restored, either `'restore'` or\n   *   `'autocomplete'`.\n   */\n  formStateRestoreCallback?(\n    state: FormRestoreState | null,\n    reason: FormRestoreReason,\n  ): void;\n\n  /**\n   * An optional callback for when the associated form changes.\n   *\n   * @param form The new associated form, or `null` if there is none.\n   */\n  formAssociatedCallback?(form: HTMLFormElement | null): void;\n}\n\n/**\n * The constructor of a `FormAssociated` element.\n */\nexport interface FormAssociatedConstructor {\n  /**\n   * Indicates that an element is participating in form association.\n   */\n  readonly formAssociated: true;\n}\n\n/**\n * A symbol property to retrieve the form value for an element.\n */\nexport const getFormValue = Symbol('getFormValue');\n\n/**\n * A symbol property to retrieve the form state for an element.\n */\nexport const getFormState = Symbol('getFormState');\n\n/**\n * Mixes in form-associated behavior for a class. This allows an element to add\n * values to `<form>` elements.\n *\n * Implementing classes should provide a `[formValue]` to return the current\n * value of the element, as well as reset and restore callbacks.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyControl extends base {\n *   \\@property()\n *   value = '';\n *\n *   override [getFormValue]() {\n *     return this.value;\n *   }\n *\n *   override formResetCallback() {\n *     const defaultValue = this.getAttribute('value');\n *     this.value = defaultValue;\n *   }\n *\n *   override formStateRestoreCallback(state: string) {\n *     this.value = state;\n *   }\n * }\n * ```\n *\n * Elements may optionally provide a `[formState]` if their values do not\n * represent the state of the component.\n *\n * @example\n * ```ts\n * const base = mixinFormAssociated(mixinElementInternals(LitElement));\n *\n * class MyCheckbox extends base {\n *   \\@property()\n *   value = 'on';\n *\n *   \\@property({type: Boolean})\n *   checked = false;\n *\n *   override [getFormValue]() {\n *     return this.checked ? this.value : null;\n *   }\n *\n *   override [getFormState]() {\n *     return String(this.checked);\n *   }\n *\n *   override formResetCallback() {\n *     const defaultValue = this.hasAttribute('checked');\n *     this.checked = defaultValue;\n *   }\n *\n *   override formStateRestoreCallback(state: string) {\n *     this.checked = Boolean(state);\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into. The base class must use\n *     `mixinElementInternals()`.\n * @return The provided class with `FormAssociated` mixed in.\n */\nexport function mixinFormAssociated<\n  T extends MixinBase<LitElement & WithElementInternals>,\n>(base: T): MixinReturn<T & FormAssociatedConstructor, FormAssociated> {\n  abstract class FormAssociatedElement extends base implements FormAssociated {\n    /** @nocollapse */\n    static readonly formAssociated = true;\n\n    get form() {\n      return this[internals].form;\n    }\n\n    get labels() {\n      return this[internals].labels;\n    }\n\n    // Use @property for the `name` and `disabled` properties to add them to the\n    // `observedAttributes` array and trigger `attributeChangedCallback()`.\n    //\n    // We don't use Lit's default getter/setter (`noAccessor: true`) because\n    // the attributes need to be updated synchronously to work with synchronous\n    // form APIs, and Lit updates attributes async by default.\n    @property({ noAccessor: true })\n    get name() {\n      return this.getAttribute('name') ?? '';\n    }\n    set name(name: string) {\n      // Note: setting name to null or empty does not remove the attribute.\n      this.setAttribute('name', name);\n      // We don't need to call `requestUpdate()` since it's called synchronously\n      // in `attributeChangedCallback()`.\n    }\n\n    @property({ type: Boolean, noAccessor: true })\n    get disabled() {\n      return this.hasAttribute('disabled');\n    }\n    set disabled(disabled: boolean) {\n      // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or\n      // `undefined` sets the attribute to `false`.\n      this.toggleAttribute('disabled', Boolean(disabled));\n      // We don't need to call `requestUpdate()` since it's called synchronously\n      // in `attributeChangedCallback()`.\n    }\n\n    override attributeChangedCallback(\n      name: string,\n      old: string | null,\n      value: string | null,\n    ) {\n      // Manually `requestUpdate()` for `name` and `disabled` when their\n      // attribute or property changes.\n      // The properties update their attributes, so this callback is invoked\n      // immediately when the properties are set. We call `requestUpdate()` here\n      // instead of letting Lit set the properties from the attribute change.\n      // That would cause the properties to re-set the attribute and invoke this\n      // callback again in a loop. This leads to stale state when Lit tries to\n      // determine if a property changed or not.\n      if (name === 'name' || name === 'disabled') {\n        // Disabled's value is only false if the attribute is missing and null.\n        const oldValue = name === 'disabled' ? old !== null : old;\n        // Trigger a lit update when the attribute changes.\n        this.requestUpdate(name, oldValue);\n        return;\n      }\n\n      super.attributeChangedCallback(name, old, value);\n    }\n\n    override requestUpdate(\n      name?: PropertyKey,\n      oldValue?: unknown,\n      options?: PropertyDeclaration,\n    ) {\n      super.requestUpdate(name, oldValue, options);\n      // If any properties change, update the form value, which may have changed\n      // as well.\n      // Update the form value synchronously in `requestUpdate()` rather than\n      // `update()` or `updated()`, which are async. This is necessary to ensure\n      // that form data is updated in time for synchronous event listeners.\n      this[internals].setFormValue(this[getFormValue](), this[getFormState]());\n    }\n\n    [getFormValue](): FormValue | null {\n      return this.getAttribute('value');\n    }\n\n    [getFormState](): FormValue | null {\n      return this[getFormValue]();\n    }\n\n    formDisabledCallback(disabled: boolean) {\n      this.disabled = disabled;\n    }\n  }\n\n  return FormAssociatedElement;\n}\n\n/**\n * A value that can be provided for form submission and state.\n */\nexport type FormValue = File | string | FormData;\n\n/**\n * A value to be restored for a component's form value. If a component's form\n * state is a `FormData` object, its entry list of name and values will be\n * provided.\n */\nexport type FormRestoreState =\n  | File\n  | string\n  | Array<[string, FormDataEntryValue]>;\n\n/**\n * The reason a form component is being restored for, either `'restore'` for\n * browser restoration or `'autocomplete'` for restoring user values.\n */\nexport type FormRestoreReason = 'restore' | 'autocomplete';\n"],"names":["property"],"mappings":"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"}

package/dist/html-editor.js

@@ -1,10 +1,11 @@
-import { a as i$1, _ as __decorate, I as IndividualComponent, b, A } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r } from './state-DwbEjqVk.js';
-import { e } from './query-QBcUV-L_.js';
-import { e as e$1 } from './class-map-YU7g0o3B.js';
-import { B as BaseInput } from './BaseInput-14YmcfK7.js';
+import { i as i$1, _ as __decorate, I as IndividualComponent, b, A } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { B as BaseInput } from './BaseInput-CU1zZYKc.js';
 import { r as redispatchEvent } from './dispatch-event-utils-CuEqjlPT.js';
+import './base-Cl6v8-BZ.js';
 import './directive-ZPhl09Yt.js';
 
 // ::- Persistent data structure representing an ordered mapping from
@@ -26965,6 +26966,10 @@ var css_248z = i$1`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
   width: 100%;
@@ -27109,7 +27114,7 @@ var HtmlEditor_1;
  * @summary A Tiptap-powered HTML editor with visual and source editing modes.
  * @overview
  * <p>The HTML Editor provides a rich-text editing experience built on Tiptap.
- * It wraps the editable area in a Material 3 styled <code>wc-field</code>,
+ * It wraps the editable area in A styled <code>wc-field</code>,
  * exposes common formatting actions, and includes a segmented switch between
  * <strong>Visual</strong> and <strong>HTML</strong> source modes.</p>
  *
@@ -27253,7 +27258,9 @@ let HtmlEditor = HtmlEditor_1 = class HtmlEditor extends BaseInput {
                                 return this._requestManagedMentions(mentionQuery);
                             }
                             return this.mentions
-                                .filter(item => item.label.toLowerCase().startsWith(mentionQuery.toLowerCase()))
+                                .filter(item => item.label
+                                .toLowerCase()
+                                .startsWith(mentionQuery.toLowerCase()))
                                 .map(item => item.value)
                                 .slice(0, 5);
                         },
@@ -27444,7 +27451,12 @@ let HtmlEditor = HtmlEditor_1 = class HtmlEditor extends BaseInput {
           <div class="tiptap-root"></div>
         </div>
 
-        <div class=${e$1({ 'html-source': true, hidden: this._mode !== 'html' })}>
+        <div
+          class=${e$1({
+            'html-source': true,
+            hidden: this._mode !== 'html',
+        })}
+        >
           <wc-code-editor
             language="html"
             .value=${this.value}