mtrl 0.9.6 → 0.9.8

package/dist/components/datepicker/datepicker.js

@@ -2,7 +2,7 @@ import { PREFIX } from "../../core/config.js";
 import { pipe } from "../../core/compose/index.js";
 import { createBase, withElement } from "../../core/compose/component.js";
 import { withEvents, withDisabled, withLifecycle, } from "../../core/compose/features/index.js";
-import { withAPI } from "./api.js";
+import { withAPI, isReadyForApi } from "./api.js";
 import { createBaseConfig, getContainerConfig, getInputConfig, getCalendarConfig, getApiConfig, } from "./config.js";
 import { formatDate, parseDate } from "./utils.js";
 import { renderCalendar } from "./render.js";
@@ -45,7 +45,7 @@ const createDatePicker = (config = {}) => {
             updateCalendar() {
                 if (!this.isOpen || !this.calendarElement)
                     return;
-                this.calendarElement.innerHTML = "";
+                this.calendarElement.replaceChildren();
                 const calendar = renderCalendar(this, (...[event, data]) => {
                     switch (event) {
                         case "dateSelected":
@@ -234,6 +234,9 @@ const createDatePicker = (config = {}) => {
             }
         };
         document.addEventListener("click", state.outsideClickHandler);
+        if (!isReadyForApi(state)) {
+            throw new Error("DatePicker input or outside-click handler is missing");
+        }
         return withAPI(state, getApiConfig(component))(component);
     }
     catch (error) {

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

@@ -349,6 +349,20 @@ export interface DatePickerState {
     nextYear(): void;
     render(): void;
 }
+/**
+ * State as it reaches the API step.
+ *
+ * `DatePickerState` marks these loose because the state object is built before
+ * the DOM is. By the time `withAPI` runs, the factory has created the input
+ * (throwing if it is not one) and installed the outside-click handler, so both
+ * are there — and the public `input` is declared non-optional.
+ * @category Components
+ * @internal
+ */
+export type DatePickerApiState = DatePickerState & {
+    input: HTMLInputElement;
+    outsideClickHandler: EventListener;
+};
 /**
  * Events the calendar renderer emits, each with its payload
  * @internal

package/dist/components/datepicker/utils.js

@@ -75,13 +75,13 @@ export const isDateInRange = (date, startDate, endDate) => {
 export const generateCalendarDates = (year, month, selectedDate = null, rangeEndDate = null, minDate = null, maxDate = null) => {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
+    const outOfRange = (date) => Boolean((minDate && date < minDate) || (maxDate && date > maxDate));
     const result = [];
     const firstDay = getFirstDayOfMonth(year, month);
     const daysInPrevMonth = getDaysInMonth(year, month - 1);
     for (let i = firstDay - 1; i >= 0; i--) {
         const date = new Date(year, month - 1, daysInPrevMonth - i);
-        const isDisabled = (minDate && date < minDate) ||
-            (maxDate && date > maxDate);
+        const isDisabled = outOfRange(date);
         result.push({
             date,
             day: date.getDate(),
@@ -95,8 +95,7 @@ export const generateCalendarDates = (year, month, selectedDate = null, rangeEnd
     for (let i = 1; i <= daysInMonth; i++) {
         const date = new Date(year, month, i);
         const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
-        const isDisabled = (minDate && date < minDate) ||
-            (maxDate && date > maxDate);
+        const isDisabled = outOfRange(date);
         const calendarDate = {
             date,
             day: i,
@@ -117,8 +116,7 @@ export const generateCalendarDates = (year, month, selectedDate = null, rangeEnd
     const remainingDays = totalDaysNeeded - result.length;
     for (let i = 1; i <= remainingDays; i++) {
         const date = new Date(year, month + 1, i);
-        const isDisabled = (minDate && date < minDate) ||
-            (maxDate && date > maxDate);
+        const isDisabled = outOfRange(date);
         result.push({
             date,
             day: i,

package/dist/components/dialog/features.js

@@ -2,6 +2,7 @@ import { getOverlayConfig } from "./config.js";
 import createButton from "../button/index.js";
 import { createDivider } from "../divider/index.js";
 import { addClass, removeClass } from "../../core/dom/classes.js";
+import { setHTML } from "../../core/dom/html.js";
 const DIALOG_EVENTS = {
     OPEN: "open",
     CLOSE: "close",
@@ -53,12 +54,12 @@ export const withStructure = (config) => (component) => {
             const closeButton = document.createElement("button");
             closeButton.classList.add(component.getClass("dialog-header-close"));
             closeButton.setAttribute("aria-label", "Close dialog");
-            closeButton.innerHTML = `
+            setHTML(closeButton, `
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <line x1="18" y1="6" x2="6" y2="18"></line>
           <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
-      `;
+      `);
             closeButton.addEventListener("click", (e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -75,7 +76,7 @@ export const withStructure = (config) => (component) => {
         content.classList.add(component.getClass("dialog-content"));
         content.id = contentId;
         if (config.content) {
-            content.innerHTML = config.content;
+            setHTML(content, config.content);
         }
         return content;
     };
@@ -488,7 +489,7 @@ export const withContent = () => (component) => {
                 return subtitleElement ? subtitleElement.textContent || "" : "";
             },
             setContent(content) {
-                contentElement.innerHTML = content;
+                setHTML(contentElement, content);
             },
             getContent() {
                 return contentElement.innerHTML;

package/dist/components/drawer/features/items.js

@@ -1,5 +1,6 @@
 import { DRAWER_EVENTS } from "../constants.js";
 import { createRipple, } from "../../../core/compose/features/ripple.js";
+import { setHTML } from "../../../core/dom/html.js";
 const createItemElement = (item, getClass) => {
     const el = document.createElement("button");
     el.className = getClass("drawer__item");
@@ -18,7 +19,7 @@ const createItemElement = (item, getClass) => {
     if (item.icon) {
         const iconEl = document.createElement("span");
         iconEl.className = getClass("drawer__item-icon");
-        iconEl.innerHTML = item.icon;
+        setHTML(iconEl, item.icon);
         iconEl.setAttribute("aria-hidden", "true");
         el.appendChild(iconEl);
     }
@@ -70,7 +71,7 @@ export const withItems = (config) => (component) => {
         if (!itemsContainer)
             return;
         unmountRipples();
-        itemsContainer.innerHTML = "";
+        itemsContainer.replaceChildren();
         let navIndex = 0;
         currentItems.forEach((item) => {
             const type = item.type || "item";

package/dist/components/list/features/renderer.js

@@ -1,4 +1,5 @@
 import { LIST_CLASSES, LIST_EVENTS } from "../constants.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const withRenderer = (config) => component => {
     if (!component.element) {
         console.warn('Cannot initialize list renderer: missing element');
@@ -24,9 +25,9 @@ export const withRenderer = (config) => component => {
         return element;
     }
     const renderAllItems = () => {
-        listContainer.innerHTML = '';
+        listContainer.replaceChildren();
         if (!items || items.length === 0) {
-            listContainer.innerHTML = '<div class="mtrl-list-empty">No items</div>';
+            setHTML(listContainer, '<div class="mtrl-list-empty">No items</div>');
             return;
         }
         const fragment = document.createDocumentFragment();
@@ -84,7 +85,7 @@ export const withRenderer = (config) => component => {
     if (component.lifecycle?.destroy) {
         const originalDestroy = component.lifecycle.destroy;
         component.lifecycle.destroy = () => {
-            listContainer.innerHTML = '';
+            listContainer.replaceChildren();
             originalDestroy();
         };
     }

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

@@ -15,7 +15,7 @@ interface ApiOptions {
         getItems: () => MenuContent[];
         setPosition: (position: MenuPosition) => void;
         getPosition: () => MenuPosition;
-        setSelected: (itemId: string) => void;
+        setSelected: (itemId: string | null) => void;
         getSelected: () => string | null;
     };
     opener: {

package/dist/components/menu/features/controller.js

@@ -1,5 +1,6 @@
 import { createMenuTasks } from "./tasks.js";
 import { menuOpened, menuClosed } from "./registry.js";
+import { setHTML } from "../../../core/dom/html.js";
 const withController = (config) => (component) => {
     if (!component.element) {
         console.warn("Cannot initialize menu controller: missing element");
@@ -90,7 +91,7 @@ const withController = (config) => (component) => {
         if (item.icon) {
             const iconElement = document.createElement("span");
             iconElement.className = `${component.getClass("menu-item-icon")}`;
-            iconElement.innerHTML = item.icon;
+            setHTML(iconElement, item.icon);
             contentContainer.appendChild(iconElement);
         }
         const textElement = document.createElement("span");
@@ -183,7 +184,7 @@ const withController = (config) => (component) => {
                 target.appendChild(createMenuItem(item, index));
             }
         });
-        component.element.innerHTML = "";
+        component.element.replaceChildren();
         component.element.appendChild(menuList);
     };
     const findItemById = (id) => {
@@ -192,7 +193,7 @@ const withController = (config) => (component) => {
                 return item;
             }
             if ("submenu" in item && Array.isArray(item.submenu)) {
-                for (const subItem of item.submenu) {
+                for (const subItem of item.submenu ?? []) {
                     if ("id" in subItem && subItem.id === id) {
                         return subItem;
                     }

package/dist/components/menu/features/keyboard.js

@@ -39,10 +39,12 @@ export const createKeyboardNavigation = (component) => {
         if (!parentId)
             return null;
         const level = parseInt(menuElement.getAttribute("data-level") || "1", 10);
+        const owner = component.element.id;
+        const ownerFilter = owner ? `[data-owner="${owner}"]` : "";
         const scope = level <= 1
             ? component.element
-            : document.querySelector(`.${component.getClass("menu--submenu")}[data-level="${level - 1}"]`);
-        return ((scope ?? document).querySelector(`.${component.getClass("menu-item")}[data-id="${parentId}"]`) ?? null);
+            : document.querySelector(`.${component.getClass("menu--submenu")}${ownerFilter}[data-level="${level - 1}"]`);
+        return ((scope ?? component.element).querySelector(`.${component.getClass("menu-item")}[data-id="${parentId}"]`) ?? null);
     };
     const menuItems = (menuElement) => Array.from(menuElement.querySelectorAll(`.${component.getClass("menu-item")}`));
     const resetTypeahead = () => {
@@ -173,10 +175,10 @@ export const createKeyboardNavigation = (component) => {
                     if (focusedItemIndex >= 0 &&
                         items[focusedItemIndex].classList.contains(`${component.getClass("menu-item--submenu")}`)) {
                         const itemElement = items[focusedItemIndex];
-                        const itemIndex = parseInt(itemElement.getAttribute("data-index"), 10);
+                        const itemIndex = parseInt(itemElement.getAttribute("data-index") ?? "0", 10);
                         const parentMenu = itemElement.closest(`.${component.getClass("menu--submenu")}`);
                         const parentItemId = parentMenu?.getAttribute("data-parent-item");
-                        const parentItem = actions.findItemById(parentItemId);
+                        const parentItem = parentItemId ? actions.findItemById(parentItemId) : null;
                         if (parentItem && parentItem.submenu) {
                             const itemData = parentItem.submenu[itemIndex];
                             actions.handleNestedSubmenuClick(itemData, itemIndex, itemElement);
@@ -187,7 +189,7 @@ export const createKeyboardNavigation = (component) => {
                     if (focusedItemIndex >= 0 &&
                         items[focusedItemIndex].classList.contains(`${component.getClass("menu-item--submenu")}`)) {
                         const itemElement = items[focusedItemIndex];
-                        const itemIndex = parseInt(itemElement.getAttribute("data-index"), 10);
+                        const itemIndex = parseInt(itemElement.getAttribute("data-index") ?? "0", 10);
                         const itemData = state.items[itemIndex];
                         actions.handleSubmenuClick(itemData, itemIndex, itemElement);
                     }

package/dist/components/menu/features/opener.js

@@ -128,23 +128,27 @@ const withOpener = (config) => (component) => {
     const restoreFocusToOpener = () => {
         if (!state.openerElement)
             return;
-        if (state.openerComponent &&
-            typeof state.openerComponent.focus === "function") {
+        const openerComponent = state.openerComponent;
+        if (openerComponent && typeof openerComponent.focus === "function") {
             tasks.requestAnimationFrame(() => {
-                state.openerComponent.focus();
+                openerComponent.focus();
             });
             return;
         }
-        if (state.openerComponent &&
-            "input" in state.openerComponent &&
-            state.openerComponent.input instanceof HTMLElement) {
+        if (openerComponent &&
+            "input" in openerComponent &&
+            openerComponent.input instanceof HTMLElement) {
+            const input = openerComponent.input;
             tasks.requestAnimationFrame(() => {
-                state.openerComponent.input.focus();
+                input.focus();
             });
             return;
         }
+        const openerElement = state.openerElement;
+        if (!openerElement)
+            return;
         tasks.requestAnimationFrame(() => {
-            state.openerElement.focus();
+            openerElement.focus();
         });
     };
     const handleOpenerClick = (e) => {
@@ -245,7 +249,8 @@ const withOpener = (config) => (component) => {
         state.activeClass = "";
     };
     const { element, component: openerComponent } = resolveOpener(config.opener);
-    setupOpenerEvents({ element, component: openerComponent });
+    if (element)
+        setupOpenerEvents({ element, component: openerComponent });
     if (component.lifecycle) {
         const originalDestroy = component.lifecycle.destroy || (() => { });
         component.lifecycle.destroy = () => {
@@ -278,7 +283,7 @@ const withOpener = (config) => (component) => {
             setOpener(opener) {
                 const resolved = resolveOpener(opener);
                 if (resolved.element) {
-                    setupOpenerEvents(resolved);
+                    setupOpenerEvents({ element: resolved.element, component: resolved.component });
                 }
                 return component;
             },

package/dist/components/menu/features/position.js

@@ -248,7 +248,7 @@ export const createPositioner = (component, config) => {
     const positionMenu = (openerElement) => {
         if (!openerElement || !component.element)
             return;
-        positionElement(component.element, openerElement, config.position, false);
+        positionElement(component.element, openerElement, config.position ?? "bottom-start", false);
     };
     const positionSubmenu = (submenuElement, parentItemElement, level = 1) => {
         if (!submenuElement || !parentItemElement)

package/dist/components/menu/features/submenu.js

@@ -145,7 +145,7 @@ const withSubmenu = (config) => (component) => {
         const currentLevel = itemElement.closest(`.${component.getClass("menu--submenu")}`)
             ? parseInt(itemElement
                 .closest(`.${component.getClass("menu--submenu")}`)
-                .getAttribute("data-level") || "0", 10) + 1
+                ?.getAttribute("data-level") || "0", 10) + 1
             : 1;
         closeSubmenu(currentLevel);
         const existingSubmenuIndex = state.activeSubmenus.findIndex((s) => s.menuItem === itemElement && s.isOpening);
@@ -165,6 +165,12 @@ const withSubmenu = (config) => (component) => {
         submenuElement.setAttribute("tabindex", "-1");
         submenuElement.setAttribute("data-level", currentLevel.toString());
         submenuElement.setAttribute("data-parent-item", item.id);
+        let ownerId = component.element.id;
+        if (!ownerId) {
+            ownerId = `menu-${Date.now()}-${Math.floor(Math.random() * 1000)}`;
+            component.element.id = ownerId;
+        }
+        submenuElement.setAttribute("data-owner", ownerId);
         submenuElement.style.zIndex = `${1000 + currentLevel * 10}`;
         const submenuList = document.createElement("ul");
         submenuList.className = `${component.getClass("menu-list")}`;

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

@@ -380,7 +380,7 @@ export interface MenuComponent {
      * @param itemId - ID of the menu item to mark as selected
      * @returns The menu component for chaining
      */
-    setSelected: (itemId: string) => MenuComponent;
+    setSelected: (itemId: string | null) => MenuComponent;
     /**
      * Gets the currently selected menu item's ID
      * @returns ID of the selected menu item or null if none is selected

package/dist/components/navigation/nav-item.js

@@ -1,12 +1,13 @@
 import { NAV_CLASSES } from "./constants.js";
+import { setHTML } from "../../core/dom/html.js";
 export const createExpandIcon = (prefix) => {
     const icon = document.createElement('span');
     icon.className = `${prefix}-${NAV_CLASSES.EXPAND_ICON}`;
-    icon.innerHTML = `
+    setHTML(icon, `
     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
       <polyline points="9 18 15 12 9 6"></polyline>
     </svg>
-  `;
+  `);
     return icon;
 };
 export const createNestedContainer = (items, prefix, createItem) => {
@@ -56,7 +57,7 @@ export const createNavItem = (config, container, prefix) => {
     if (config.icon) {
         const icon = document.createElement('span');
         icon.className = `${prefix}-${NAV_CLASSES.ICON}`;
-        icon.innerHTML = config.icon;
+        setHTML(icon, config.icon);
         itemElement.appendChild(icon);
     }
     if (config.label) {

package/dist/components/navigation/system/mobile.js

@@ -1,4 +1,5 @@
 import { hasTouchSupport, normalizeEvent, TOUCH_CONFIG, TOUCH_TARGETS } from "../../../core/utils/mobile.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const createOverlay = (state, mobileConfig, hideDrawer) => {
     if (state.overlayElement)
         return state.overlayElement;
@@ -19,12 +20,12 @@ export const createCloseButton = (state, mobileConfig, hideDrawer) => {
     state.closeButtonElement = document.createElement('button');
     state.closeButtonElement.className = mobileConfig.closeButtonClass;
     state.closeButtonElement.setAttribute('aria-label', 'Close navigation');
-    state.closeButtonElement.innerHTML = `
+    setHTML(state.closeButtonElement, `
     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <line x1="18" y1="6" x2="6" y2="18"></line>
       <line x1="6" y1="6" x2="18" y2="18"></line>
     </svg>
-  `;
+  `);
     state.closeButtonElement.addEventListener('click', () => {
         hideDrawer();
     });

package/dist/components/navigation-rail/navigation-rail.js

@@ -6,6 +6,7 @@ import { createEmitter } from "../../core/state/emitter.js";
 import { mountRailRipple } from "./ripple.js";
 import { createBaseConfig } from "./config.js";
 import { safeUrl } from "../../core/utils/url.js";
+import { setHTML } from "../../core/dom/html.js";
 const copyItems = (items) => {
     const ids = new Set();
     let selected = false;
@@ -94,7 +95,7 @@ export default function createNavigationRail(config = {}) {
             else
                 element.removeAttribute('aria-current');
             const icon = element.querySelector(`.${cls('__icon')}`);
-            icon.innerHTML = item.active && item.activeIcon ? item.activeIcon : item.icon;
+            setHTML(icon, item.active && item.activeIcon ? item.activeIcon : item.icon);
         }
     };
     const render = () => {
@@ -163,7 +164,7 @@ export default function createNavigationRail(config = {}) {
         toggle?.setAttribute('aria-expanded', String(expanded));
         toggle?.setAttribute('aria-label', (expanded ? options.collapseLabel : options.expandLabel));
         if (toggle)
-            toggle.innerHTML = (expanded ? options.collapseIcon : options.expandIcon);
+            setHTML(toggle, (expanded ? options.collapseIcon : options.expandIcon));
         if (dialog) {
             if (expanded)
                 showModal();

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

@@ -78,7 +78,6 @@ export const withCanvas = (config) => (component) => {
             return false;
         context = { canvas, ctx, width: 0, height: 0, pixelRatio: view?.devicePixelRatio || 1 };
         measure();
-        component.ctx = ctx;
         return true;
     };
     const currentAmplitude = () => {
@@ -293,7 +292,6 @@ export const withCanvas = (config) => (component) => {
     return {
         ...component,
         canvas,
-        ctx: context?.ctx,
         draw,
         resize,
     };

package/dist/components/search/features/states.js

@@ -1,4 +1,5 @@
 import { SEARCH_STATES, SEARCH_VIEW_MODES, SEARCH_CLASSES, SEARCH_ICONS, } from "../constants.js";
+import { setHTML } from "../../../core/dom/html.js";
 export const withStates = (config) => (component) => {
     let currentState = config.initialState || SEARCH_STATES.BAR;
     let currentViewMode = config.viewMode || SEARCH_VIEW_MODES.DOCKED;
@@ -16,7 +17,7 @@ export const withStates = (config) => (component) => {
         element.classList.remove(getClass(SEARCH_CLASSES.STATE_BAR));
         element.classList.add(getClass(SEARCH_CLASSES.STATE_VIEW));
         if (structure?.leadingIcon) {
-            structure.leadingIcon.innerHTML = SEARCH_ICONS.BACK;
+            setHTML(structure.leadingIcon, SEARCH_ICONS.BACK);
             structure.leadingIcon.setAttribute("aria-label", "Go back");
         }
         if (structure?.divider && !element.contains(structure.divider)) {
@@ -50,8 +51,7 @@ export const withStates = (config) => (component) => {
         element.classList.remove(getClass(SEARCH_CLASSES.STATE_VIEW));
         element.classList.add(getClass(SEARCH_CLASSES.STATE_BAR));
         if (structure?.leadingIcon) {
-            structure.leadingIcon.innerHTML =
-                config.leadingIcon || SEARCH_ICONS.SEARCH;
+            setHTML(structure.leadingIcon, config.leadingIcon || SEARCH_ICONS.SEARCH);
             structure.leadingIcon.setAttribute("aria-label", "Search");
         }
         if (structure?.divider && element.contains(structure.divider)) {

package/dist/components/search/features/structure.js

@@ -62,6 +62,9 @@ export const withStructure = (config) => (component) => {
     if (value) {
         inputAttributes.value = value;
     }
+    if (config.name) {
+        inputAttributes.name = config.name;
+    }
     if (isDisabled) {
         inputAttributes.disabled = "disabled";
     }

package/dist/components/search/features/suggestions.js

@@ -83,7 +83,7 @@ export const withSuggestions = () => (component) => {
             return;
         const suggestions = getSuggestions();
         const query = component.input?.getValue?.() || "";
-        suggestionsList.innerHTML = "";
+        suggestionsList.replaceChildren();
         if (suggestions.length === 0) {
             return;
         }
@@ -112,7 +112,7 @@ export const withSuggestions = () => (component) => {
     const clearRenderedSuggestions = () => {
         const suggestionsList = component.structure?.suggestionsList;
         if (suggestionsList) {
-            suggestionsList.innerHTML = "";
+            suggestionsList.replaceChildren();
         }
         highlightedIndex = -1;
     };

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

@@ -74,6 +74,12 @@ export interface SearchConfig {
     placeholder?: string;
     /** Initial input value */
     value?: string;
+    /**
+     * Form field name. Set on the text input itself, so the search takes part
+     * in a surrounding form and its value appears in `FormData`. Without it the
+     * search submits nothing.
+     */
+    name?: string;
     /** Custom leading icon HTML (replaces default search icon) */
     leadingIcon?: string;
     /** Trailing content items (icons, avatar) */

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

@@ -10,7 +10,10 @@ export declare const DEFAULT_CONFIG: SegmentedButtonConfig;
  * @returns {SegmentedButtonConfig} Complete configuration with defaults applied
  * @internal
  */
-export declare const createBaseConfig: (config?: SegmentedButtonConfig) => SegmentedButtonConfig;
+export declare const createBaseConfig: (config?: SegmentedButtonConfig) => SegmentedButtonConfig & {
+    componentName: string;
+    prefix: string;
+};
 /**
  * Generates element configuration for the Segmented Button container
  * @param {SegmentedButtonConfig} config - Segmented Button configuration

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

@@ -24,7 +24,7 @@ export const getContainerConfig = (config) => {
             density !== Density.DEFAULT
                 ? `${config.prefix}-segmented-button--${density}`
                 : null,
-        ],
+        ].filter((name) => Boolean(name)),
         interactive: true,
     };
 };

package/dist/components/segmented-button/segment.d.ts

@@ -1,4 +1,4 @@
-import { SegmentConfig, Segment } from "./types.js";
+import { SegmentConfig, Segment, SegmentedButtonConfig } from "./types.js";
 /**
  * Creates a segment for the segmented button using the button component
  *
@@ -16,7 +16,4 @@ import { SegmentConfig, Segment } from "./types.js";
  * @returns {Segment} Segment object
  * @internal
  */
-export declare const createSegment: (config: SegmentConfig, container: HTMLElement, prefix: string, groupDisabled?: boolean, options?: {
-    ripple: boolean;
-    rippleConfig: {};
-}) => Segment;
+export declare const createSegment: (config: SegmentConfig, container: HTMLElement, prefix: string, groupDisabled?: boolean, options?: Pick<SegmentedButtonConfig, "ripple" | "rippleConfig">) => Segment;

package/dist/components/segmented-button/segment.js

@@ -1,12 +1,16 @@
 import createButton from "../button/index.js";
 import { DEFAULT_CHECKMARK_ICON } from "./constants.js";
+import { setHTML } from "../../core/dom/html.js";
 const createCheckmarkElement = (prefix, icon) => {
     const checkmark = document.createElement("span");
     checkmark.className = `${prefix}-segment-checkmark`;
-    checkmark.innerHTML = icon || DEFAULT_CHECKMARK_ICON;
+    setHTML(checkmark, icon || DEFAULT_CHECKMARK_ICON);
     return checkmark;
 };
-export const createSegment = (config, container, prefix, groupDisabled = false, options = { ripple: true, rippleConfig: {} }) => {
+export const createSegment = (config, container, prefix, groupDisabled = false, options = {
+    ripple: true,
+    rippleConfig: {},
+}) => {
     const isDisabled = groupDisabled || config.disabled;
     const originalIcon = config.icon;
     const hasText = Boolean(config.text);
@@ -53,7 +57,7 @@ export const createSegment = (config, container, prefix, groupDisabled = false,
         button.element.setAttribute("aria-pressed", selected ? "true" : "false");
         if (isIconOnly) {
         }
-        else if (hasIcon && hasText) {
+        else if (originalIcon && hasText) {
             if (selected) {
                 button.setIcon(checkmarkIcon);
             }