mtrl 0.9.5 → 0.9.8

package/README.md

@@ -167,6 +167,26 @@ const createNote = (config: NoteConfig): NoteComponent =>
 
 The element gets the `mtrl-note` class, `withEvents` adds `on`, `off` and `emit`, and `destroy()` removes the element. Add `withLifecycle()` from `mtrl/core/compose/features` when features need to register cleanup.
 
+## Markup and sanitizing
+
+Icons and `content` options are markup strings, written with `innerHTML`. Every such write goes through one sink, so you can decide once how markup is treated. Set a policy when the strings can come from users or a CMS, or when your page enforces Trusted Types:
+
+```typescript
+import { configureHTML } from 'mtrl';
+
+// A sanitizer
+configureHTML({ sanitize: (html) => DOMPurify.sanitize(html) });
+
+// Trusted Types: under `require-trusted-types-for 'script'` a plain string
+// assignment throws, so return a TrustedHTML from a policy your CSP allows
+const policy = window.trustedTypes.createPolicy('mtrl', {
+  createHTML: (html) => DOMPurify.sanitize(html),
+});
+configureHTML({ sanitize: (html) => policy.createHTML(html) });
+```
+
+The policy sees every string, the library's own icons included; a `TrustedHTML` value passed as an icon or content skips it. With no policy set, markup is written as it is. Text options (`text`, a card's `text`) never go through `innerHTML`.
+
 ## Upgrading from 0.7
 
 0.8.0 aligns the components with Material 3 expressive, and some of that changes the API or the styles:

package/dist/README.md

@@ -167,6 +167,26 @@ const createNote = (config: NoteConfig): NoteComponent =>
 
 The element gets the `mtrl-note` class, `withEvents` adds `on`, `off` and `emit`, and `destroy()` removes the element. Add `withLifecycle()` from `mtrl/core/compose/features` when features need to register cleanup.
 
+## Markup and sanitizing
+
+Icons and `content` options are markup strings, written with `innerHTML`. Every such write goes through one sink, so you can decide once how markup is treated. Set a policy when the strings can come from users or a CMS, or when your page enforces Trusted Types:
+
+```typescript
+import { configureHTML } from 'mtrl';
+
+// A sanitizer
+configureHTML({ sanitize: (html) => DOMPurify.sanitize(html) });
+
+// Trusted Types: under `require-trusted-types-for 'script'` a plain string
+// assignment throws, so return a TrustedHTML from a policy your CSP allows
+const policy = window.trustedTypes.createPolicy('mtrl', {
+  createHTML: (html) => DOMPurify.sanitize(html),
+});
+configureHTML({ sanitize: (html) => policy.createHTML(html) });
+```
+
+The policy sees every string, the library's own icons included; a `TrustedHTML` value passed as an icon or content skips it. With no policy set, markup is written as it is. Text options (`text`, a card's `text`) never go through `innerHTML`.
+
 ## Upgrading from 0.7
 
 0.8.0 aligns the components with Material 3 expressive, and some of that changes the API or the styles:

package/dist/components/bottom-app-bar/bottom-app-bar.js

@@ -18,7 +18,7 @@ export const createBottomAppBar = (config = {}) => {
                 ? `${component.getClass("bottom-app-bar")}--fab-center`
                 : "",
             componentConfig.class,
-        ],
+        ].filter((name) => Boolean(name)),
         attributes: {
             role: "toolbar",
             "aria-label": "Bottom app bar",
@@ -63,7 +63,7 @@ export const createBottomAppBar = (config = {}) => {
             return this;
         },
         addFab(fab) {
-            fabContainer.innerHTML = "";
+            fabContainer.replaceChildren();
             fabContainer.appendChild(fab);
             this.element.classList.add(`${component.getClass("bottom-app-bar")}--with-fab`);
             return this;

package/dist/components/bottom-sheet/features/structure.js

@@ -1,4 +1,5 @@
 import { BOTTOM_SHEET_CLASSES, BOTTOM_SHEET_VARIANTS } from "../constants.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const withStructure = (config) => (component) => {
     const { element, getClass } = component;
     const isModal = config.variant === BOTTOM_SHEET_VARIANTS.MODAL;
@@ -46,7 +47,7 @@ export const withStructure = (config) => (component) => {
         content.appendChild(config.content);
     }
     else if (typeof config.content === "string") {
-        content.innerHTML = config.content;
+        setHTML(content, config.content);
     }
     container.appendChild(content);
     element.appendChild(container);
@@ -60,11 +61,11 @@ export const withStructure = (config) => (component) => {
             title,
             content,
             setContent(next) {
-                content.innerHTML = "";
+                content.replaceChildren();
                 if (next instanceof HTMLElement)
                     content.appendChild(next);
                 else
-                    content.innerHTML = next;
+                    setHTML(content, next);
             },
             setTitle(next) {
                 if (title) {

package/dist/components/button/api.js

@@ -1,4 +1,5 @@
 import { addClass } from "../../core/index.js";
+import { setHTML } from "../../core/dom/html.js";
 export const withAPI = ({ disabled, lifecycle }) => (component) => {
     const textAPI = {
         setText: (content) => {
@@ -85,7 +86,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             else if (!buttonComponent.hasIcon()) {
                 const newIconElement = document.createElement("span");
                 newIconElement.className = `${component.getClass("button-icon")}`;
-                newIconElement.innerHTML = icon;
+                setHTML(newIconElement, icon);
                 if (component.element.firstChild) {
                     component.element.insertBefore(newIconElement, component.element.firstChild);
                 }
@@ -99,7 +100,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
             else {
                 const iconElement = component.icon.getElement();
                 if (iconElement) {
-                    iconElement.innerHTML = icon;
+                    setHTML(iconElement, icon);
                 }
             }
             return buttonComponent;

package/dist/components/button/features/progress.js

@@ -36,7 +36,7 @@ export const withProgress = (config) => (component) => {
                 addClass(progress.element, component.getClass("button-progress"));
                 progress.element.style.display = "none";
                 Object.entries(progressEventHandlers).forEach(([event, handler]) => {
-                    progress.on(event, handler);
+                    p.on(event, handler);
                 });
                 component.progress = progress;
                 return progress;
@@ -51,7 +51,7 @@ export const withProgress = (config) => (component) => {
         }
         return component.element.firstChild;
     };
-    component.showProgress = async function () {
+    const showProgress = async () => {
         const p = await ensureProgress();
         if (p.element) {
             if (!component.element.contains(p.element)) {
@@ -72,11 +72,12 @@ export const withProgress = (config) => (component) => {
         }
         return component;
     };
-    component.showProgressSync = function () {
-        component.showProgress();
+    component.showProgress = showProgress;
+    component.showProgressSync = () => {
+        void showProgress();
         return component;
     };
-    component.hideProgress = async function () {
+    const hideProgress = async () => {
         if (!progress)
             return component;
         progress.element.style.display = "none";
@@ -87,26 +88,29 @@ export const withProgress = (config) => (component) => {
         }
         return component;
     };
-    component.hideProgressSync = function () {
-        component.hideProgress();
+    component.hideProgress = hideProgress;
+    component.hideProgressSync = () => {
+        void hideProgress();
         return component;
     };
-    component.setProgress = async function (value) {
+    const setProgress = async (value) => {
         const p = await ensureProgress();
         p.setValue(value);
         return component;
     };
-    component.setProgressSync = function (value) {
-        component.setProgress(value);
+    component.setProgress = setProgress;
+    component.setProgressSync = (value) => {
+        void setProgress(value);
         return component;
     };
-    component.setIndeterminate = async function (indeterminate) {
+    const setIndeterminate = async (indeterminate) => {
         const p = await ensureProgress();
         p.setIndeterminate(indeterminate);
         return component;
     };
-    component.setIndeterminateSync = function (indeterminate) {
-        component.setIndeterminate(indeterminate);
+    component.setIndeterminate = setIndeterminate;
+    component.setIndeterminateSync = (indeterminate) => {
+        void setIndeterminate(indeterminate);
         return component;
     };
     const readLabel = () => component.text ? component.text.getText() : component.getText?.();
@@ -116,11 +120,12 @@ export const withProgress = (config) => (component) => {
         else
             component.setText?.(value);
     };
-    component.setLoading = async function (loading, text) {
+    const setLoading = async (loading, text) => {
         if (loading && !isLoading) {
             originalText = readLabel() ?? "";
             isLoading = true;
-            await component.showProgress();
+            component.element.setAttribute("aria-busy", "true");
+            await showProgress();
             if (component.disabled?.disable) {
                 component.disabled.disable();
             }
@@ -129,7 +134,8 @@ export const withProgress = (config) => (component) => {
         }
         else if (!loading && isLoading) {
             isLoading = false;
-            await component.hideProgress();
+            component.element.removeAttribute("aria-busy");
+            await hideProgress();
             if (component.disabled?.enable) {
                 component.disabled.enable();
             }
@@ -140,8 +146,9 @@ export const withProgress = (config) => (component) => {
         }
         return component;
     };
-    component.setLoadingSync = function (loading, text) {
-        component.setLoading(loading, text);
+    component.setLoading = setLoading;
+    component.setLoadingSync = (loading, text) => {
+        void setLoading(loading, text);
         return component;
     };
     if (component.lifecycle) {
@@ -157,9 +164,7 @@ export const withProgress = (config) => (component) => {
         };
     }
     if (config.showProgress) {
-        ensureProgress().then(() => {
-            component.showProgress();
-        });
+        void ensureProgress().then(() => showProgress());
     }
     return component;
 };

package/dist/components/button-group/config.d.ts

@@ -6,11 +6,19 @@ import { ButtonGroupConfig, ButtonGroupVariant, ButtonGroupDensity } from "./typ
 export declare const DEFAULT_CONFIG: Partial<ButtonGroupConfig>;
 /**
  * Creates the base configuration for Button Group component
+ *
+ * The return type keeps what createComponentConfig guarantees: componentName
+ * and prefix are always filled in, so callers building class names from them
+ * do not have to treat them as missing.
+ *
  * @param {ButtonGroupConfig} config - User provided configuration
- * @returns {ButtonGroupConfig} Complete configuration with defaults applied
+ * @returns Complete configuration with defaults applied
  * @internal
  */
-export declare const createBaseConfig: (config?: ButtonGroupConfig) => ButtonGroupConfig;
+export declare const createBaseConfig: (config?: ButtonGroupConfig) => Partial<ButtonGroupConfig> & {
+    componentName: string;
+    prefix: string;
+};
 /**
  * Generates element configuration for the Button Group container
  * @param {ButtonGroupConfig} config - Button Group configuration
@@ -50,7 +58,7 @@ export declare const getSizeStyles: (prefix: string, size: ButtonGroupConfig["si
  * @returns {Object} Button configuration with group-specific settings
  * @internal
  */
-export declare const getButtonConfig: (buttonConfig: ButtonGroupConfig["buttons"][number], index: number, total: number, groupConfig: ButtonGroupConfig) => {
+export declare const getButtonConfig: (buttonConfig: NonNullable<ButtonGroupConfig["buttons"]>[number], index: number, total: number, groupConfig: ButtonGroupConfig) => {
     variant: ButtonGroupVariant;
     size: import("./types.js").ButtonGroupSize;
     shape: import("./types.js").ButtonGroupShape;

package/dist/components/button-group/config.js

@@ -53,7 +53,7 @@ export const getContainerConfig = (config) => {
                 ? `${config.prefix}-button-group--density-${density}`
                 : null,
             config.equalWidth ? `${config.prefix}-button-group--equal-width` : null
-        ],
+        ].filter((name) => Boolean(name)),
         interactive: true
     };
 };

package/dist/components/card/content.js

@@ -3,6 +3,7 @@ import { pipe } from "../../core/compose/index.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { createElement } from "../../core/dom/create.js";
 import { safeUrl } from "../../core/utils/url.js";
+import { setHTML } from "../../core/dom/html.js";
 export const CARD_CONTENT_PADDING = true;
 let headerCount = 0;
 export const createCardContent = (config = {}) => {
@@ -18,14 +19,14 @@ export const createCardContent = (config = {}) => {
             className: [
                 config.class,
                 config.padding === false ? `${PREFIX}-card-content--no-padding` : null
-            ],
+            ].filter((name) => Boolean(name)),
             attributes: {
                 'role': 'region',
                 'style': 'display: block; color: inherit;'
             }
         }))(baseConfig);
         if (config.html) {
-            content.element.innerHTML = config.html;
+            setHTML(content.element, config.html);
         }
         else if (config.text) {
             const paragraph = document.createElement("p");
@@ -133,7 +134,7 @@ export const createCardActions = (config = {}) => {
                 config.fullBleed ? `${PREFIX}-card-actions--full-bleed` : null,
                 config.vertical ? `${PREFIX}-card-actions--vertical` : null,
                 config.align ? `${PREFIX}-card-actions--${config.align}` : null
-            ],
+            ].filter((name) => Boolean(name)),
             attributes: {
                 'role': 'group'
             }
@@ -171,7 +172,7 @@ export const createCardMedia = (config = {}) => {
                 config.class,
                 config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
                 config.contain ? `${PREFIX}-card-media--contain` : null
-            ]
+            ].filter((name) => Boolean(name))
         }))(baseConfig);
         if (config.element instanceof HTMLElement) {
             media.element.appendChild(config.element);

package/dist/components/carousel/features/slides.js

@@ -1,4 +1,5 @@
 import { safeUrl } from "../../../core/utils/url.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const withSlides = (config) => (component) => {
     const prefix = component.getClass("carousel");
     const scroller = document.createElement("div");
@@ -22,7 +23,7 @@ export const withSlides = (config) => (component) => {
         el.replaceChildren();
         if (slide.content !== undefined) {
             if (typeof slide.content === "string")
-                el.innerHTML = slide.content;
+                setHTML(el, slide.content);
             else
                 el.appendChild(slide.content);
             return;

package/dist/components/checkbox/checkbox.js

@@ -18,6 +18,28 @@ const enhanceWithCheckable = (component, config) => {
         syncIndeterminate();
         return enhanced;
     };
+    const clearIndeterminate = () => {
+        if (enhanced.input.indeterminate) {
+            enhanced.input.indeterminate = false;
+            syncIndeterminate();
+        }
+    };
+    const { checkable } = enhanced;
+    if (checkable) {
+        const { check, uncheck, toggle } = checkable;
+        checkable.check = () => {
+            clearIndeterminate();
+            return check.call(checkable);
+        };
+        checkable.uncheck = () => {
+            clearIndeterminate();
+            return uncheck.call(checkable);
+        };
+        checkable.toggle = () => {
+            clearIndeterminate();
+            return toggle.call(checkable);
+        };
+    }
     return enhanced;
 };
 const createCheckbox = (config = {}) => {

package/dist/components/checkbox/config.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxConfig, BaseComponent, ApiOptions } from "./types.js";
+import { CheckboxConfig, BaseComponent, ApiComponent, ApiOptions } from "./types.js";
 /**
  * Default configuration for the Checkbox component
  */
@@ -48,8 +48,8 @@ export declare const withCheckIcon: (config: CheckboxConfig) => (component: Base
 export declare const withLabelPosition: (config: CheckboxConfig) => (component: BaseComponent) => BaseComponent;
 /**
  * Creates API configuration for the Checkbox component
- * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features
+ * @param {ApiComponent} comp - Component with disabled, lifecycle, and checkable features
  * @returns {ApiOptions} API configuration object
  */
-export declare const getApiConfig: (comp: BaseComponent) => ApiOptions;
+export declare const getApiConfig: (comp: ApiComponent) => ApiOptions;
 export default defaultConfig;

package/dist/components/checkbox/config.js

@@ -1,4 +1,5 @@
 import { createComponentConfig, createElementConfig, } from "../../core/config/component.js";
+import { setHTML } from "../../core/dom/html.js";
 export const defaultConfig = {
     variant: "filled",
     labelPosition: "end",
@@ -12,11 +13,11 @@ export const getElementConfig = (config) => createElementConfig(config, {
 export const withCheckIcon = (config) => (component) => {
     const icon = document.createElement("span");
     icon.className = `${config.prefix}-checkbox-icon`;
-    icon.innerHTML = `
+    setHTML(icon, `
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
       <path d="M9.55 14.6L6.35 11.4l-1.9 1.9L9.55 18.4l10.9-10.9-1.9-1.9z"/>
     </svg>
-  `;
+  `);
     component.element.appendChild(icon);
     return component;
 };
@@ -28,17 +29,17 @@ export const withLabelPosition = (config) => (component) => {
 };
 export const getApiConfig = (comp) => ({
     disabled: {
-        enable: comp.disabled?.enable,
-        disable: comp.disabled?.disable,
+        enable: comp.disabled.enable,
+        disable: comp.disabled.disable,
     },
     lifecycle: {
-        destroy: comp.lifecycle?.destroy,
+        destroy: comp.lifecycle.destroy,
     },
     checkable: {
-        check: comp.checkable?.check,
-        uncheck: comp.checkable?.uncheck,
-        toggle: comp.checkable?.toggle,
-        isChecked: comp.checkable?.isChecked,
+        check: comp.checkable.check,
+        uncheck: comp.checkable.uncheck,
+        toggle: comp.checkable.toggle,
+        isChecked: comp.checkable.isChecked,
     },
 });
 export default defaultConfig;

package/dist/components/checkbox/types.d.ts

@@ -111,7 +111,8 @@ export interface CheckboxComponent {
      */
     getValue: () => boolean;
     /**
-     * Sets the checkbox's checked state
+     * Sets the checkbox's checked state.
+     * Clears indeterminate, as a user click does.
      * @param value - Boolean or string ("true"/"false"/"1"/"0") value
      * @returns Checkbox component for method chaining
      */
@@ -128,17 +129,20 @@ export interface CheckboxComponent {
      */
     setValueAttribute: (value: string) => CheckboxComponent;
     /**
-     * Checks the checkbox (sets checked=true)
+     * Checks the checkbox (sets checked=true).
+     * Clears indeterminate, as a user click does.
      * @returns Checkbox component for method chaining
      */
     check: () => CheckboxComponent;
     /**
-     * Unchecks the checkbox (sets checked=false)
+     * Unchecks the checkbox (sets checked=false).
+     * Clears indeterminate, as a user click does.
      * @returns Checkbox component for method chaining
      */
     uncheck: () => CheckboxComponent;
     /**
-     * Toggles the checkbox's checked state
+     * Toggles the checkbox's checked state.
+     * Clears indeterminate, as a user click does.
      * @returns Checkbox component for method chaining
      */
     toggle: () => CheckboxComponent;
@@ -250,3 +254,14 @@ export interface BaseComponent {
         isChecked: () => boolean;
     };
 }
+/**
+ * Component as it reaches the API step of the pipeline.
+ *
+ * `BaseComponent` marks the feature controllers optional because a component
+ * part-way through the pipeline has not got them yet. By the time
+ * `getApiConfig` runs, the checkable, disabled and lifecycle features have all
+ * been applied, so they are there.
+ * @category Components
+ * @internal
+ */
+export type ApiComponent = BaseComponent & Required<Pick<BaseComponent, "checkable" | "disabled" | "lifecycle">>;

package/dist/components/chips/api.js

@@ -37,7 +37,9 @@ export const withAPI = (options) => (component) => {
         getValue() {
             if (options.chips &&
                 typeof options.chips.getSelectedValues === "function") {
-                const values = options.chips.getSelectedValues();
+                const values = options.chips
+                    .getSelectedValues()
+                    .filter((value) => value !== null);
                 if (!options.config?.multiSelect) {
                     return values.length > 0 ? values[0] : null;
                 }

package/dist/components/chips/chip/api.js

@@ -1,3 +1,4 @@
+import { setHTML } from "../../../core/dom/html.js";
 export const withAPI = ({ disabled, lifecycle }) => (component) => {
     let isSelected = component.element.classList.contains(`${component.getClass("chip")}--selected`);
     let chipValue = component.element.getAttribute("data-value") || null;
@@ -118,7 +119,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
                 contentContainer.insertBefore(leadingIconElement, contentContainer.firstChild);
             }
             if (leadingIconElement) {
-                leadingIconElement.innerHTML = icon || "";
+                setHTML(leadingIconElement, icon || "");
                 if (!icon && leadingIconElement.parentNode) {
                     leadingIconElement.parentNode.removeChild(leadingIconElement);
                 }
@@ -141,7 +142,7 @@ export const withAPI = ({ disabled, lifecycle }) => (component) => {
                 }
             }
             if (trailingIconElement) {
-                trailingIconElement.innerHTML = icon || "";
+                setHTML(trailingIconElement, icon || "");
                 if (!icon && trailingIconElement.parentNode) {
                     trailingIconElement.parentNode.removeChild(trailingIconElement);
                 }

package/dist/components/chips/chip/chip.js

@@ -3,6 +3,7 @@ import { createBase, withElement } from "../../../core/compose/component.js";
 import { withEvents, withVariant, withRipple, withDisabled, withLifecycle, } from "../../../core/compose/features/index.js";
 import { withAPI } from "./api.js";
 import { createBaseConfig, getElementConfig, getApiConfig } from "./config.js";
+import { setHTML } from "../../../core/dom/html.js";
 const createChip = (config = {}) => {
     const baseConfig = createBaseConfig(config);
     try {
@@ -17,7 +18,7 @@ const createChip = (config = {}) => {
         if (config.leadingIcon || config.icon) {
             const leadingIconElement = document.createElement("span");
             leadingIconElement.className = `${chip.getClass("chip")}-leading-icon`;
-            leadingIconElement.innerHTML = config.leadingIcon || config.icon || "";
+            setHTML(leadingIconElement, config.leadingIcon || config.icon || "");
             contentContainer.appendChild(leadingIconElement);
         }
         if (config.text) {
@@ -29,11 +30,12 @@ const createChip = (config = {}) => {
         if (config.trailingIcon) {
             const trailingIconElement = document.createElement("span");
             trailingIconElement.className = `${chip.getClass("chip")}-trailing-icon`;
-            trailingIconElement.innerHTML = config.trailingIcon;
-            if (config.onTrailingIconClick) {
+            setHTML(trailingIconElement, config.trailingIcon);
+            const onTrailingIconClick = config.onTrailingIconClick;
+            if (onTrailingIconClick) {
                 trailingIconElement.addEventListener("click", (e) => {
                     e.stopPropagation();
-                    config.onTrailingIconClick(chip);
+                    onTrailingIconClick(chip);
                 });
             }
             contentContainer.appendChild(trailingIconElement);

package/dist/components/chips/config.js

@@ -4,7 +4,7 @@ export const defaultConfig = {
     scrollable: false,
     vertical: false,
     multiSelect: false,
-    onChange: null,
+    onChange: undefined,
     selector: null,
     labelPosition: "start",
 };

package/dist/components/datepicker/api.d.ts

@@ -1,7 +1,7 @@
 import type { ElementComponent } from "../../core/compose/component.js";
 import type { DisabledComponent } from "../../core/compose/features/disabled.js";
 import type { LifecycleComponent } from "../../core/compose/features/lifecycle.js";
-import { DatePickerComponent, DatePickerState, ApiOptions } from "./types.js";
+import { DatePickerComponent, DatePickerState, DatePickerApiState, ApiOptions } from "./types.js";
 /**
  * Enhances a datepicker component with API methods
  * @param {object} state - Current state of the datepicker
@@ -9,4 +9,10 @@ import { DatePickerComponent, DatePickerState, ApiOptions } from "./types.js";
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the DatePicker component
  */
-export declare const withAPI: (state: DatePickerState, { disabled, lifecycle, events }: ApiOptions) => (component: ElementComponent & DisabledComponent & LifecycleComponent) => DatePickerComponent;
+/**
+ * The API's precondition, checked rather than asserted: the factory creates the
+ * input and installs the outside-click handler before it builds the API, and
+ * this verifies that at runtime instead of casting past it.
+ */
+export declare const isReadyForApi: (state: DatePickerState) => state is DatePickerApiState;
+export declare const withAPI: (state: DatePickerApiState, { disabled, lifecycle, events }: ApiOptions) => (component: ElementComponent & DisabledComponent & LifecycleComponent) => DatePickerComponent;

package/dist/components/datepicker/api.js

@@ -1,4 +1,5 @@
 import { formatDate, parseDate, addMonths } from "./utils.js";
+export const isReadyForApi = (state) => state.input !== null && state.outsideClickHandler !== undefined;
 export const withAPI = (state, { disabled, lifecycle, events }) => (component) => {
     const calendar = {
         goToDate(date) {

package/dist/components/datepicker/config.d.ts

@@ -6,12 +6,22 @@ import { DatePickerConfig } from "./types.js";
  * Default configuration for the DatePicker component
  */
 export declare const defaultConfig: DatePickerConfig;
+/**
+ * Configuration as it leaves `createBaseConfig`.
+ *
+ * `DatePickerConfig` marks these optional because a caller may omit them.
+ * Once the defaults have been merged and `closeOnSelect` derived from the
+ * variant, they are all present — and the state the component builds from
+ * this declares them non-optional. Saying so here is what lets that hold
+ * without a cast.
+ */
+export type ResolvedDatePickerConfig = DatePickerConfig & Required<Pick<DatePickerConfig, "variant" | "initialView" | "selectionMode" | "dateFormat" | "closeOnSelect">>;
 /**
  * Creates the base configuration for DatePicker component
  * @param {DatePickerConfig} config - User provided configuration
- * @returns {DatePickerConfig} Complete configuration with defaults applied
+ * @returns {ResolvedDatePickerConfig} Complete configuration with defaults applied
  */
-export declare const createBaseConfig: (config?: DatePickerConfig) => DatePickerConfig;
+export declare const createBaseConfig: (config?: DatePickerConfig) => ResolvedDatePickerConfig;
 /**
  * Generates element configuration for the DatePicker container
  * @param {DatePickerConfig} config - DatePicker configuration
@@ -44,7 +54,7 @@ export declare const getContainerConfig: (config: DatePickerConfig) => {
  * @param {DatePickerConfig} config - DatePicker configuration
  * @returns {Object} Element configuration object for input field
  */
-export declare const getInputConfig: (config: DatePickerConfig) => {
+export declare const getInputConfig: (config: ResolvedDatePickerConfig) => {
     tag: string;
     componentName: string;
     attributes: Record<string, unknown>;
@@ -71,7 +81,7 @@ export declare const getInputConfig: (config: DatePickerConfig) => {
  * @param {DatePickerConfig} config - DatePicker configuration
  * @returns {Object} Element configuration object for calendar container
  */
-export declare const getCalendarConfig: (config: DatePickerConfig) => {
+export declare const getCalendarConfig: (config: ResolvedDatePickerConfig) => {
     tag: string;
     componentName: string;
     attributes: Record<string, unknown>;