@santi020k/lumen-core 3.0.1 → 4.1.0

package/dist/charts.js

@@ -1,3 +1,4 @@
+export { createLumenChartActivationController, createLumenChartDatumActivation, createLumenHeatmapDatumActivation, createLumenRangeDatumActivation, parseLumenChartDatumActivation } from './chart-activation.js';
 export const lumenChartTones = [
     'series-1',
     'series-2',
@@ -25,11 +26,18 @@ const formatDefaultLumenChartSummary = (summary, formatValue) => {
         `Values range from ${formatValue(summary.minimum ?? 0)} to ${formatValue(summary.maximum ?? 0)}.${missing}`;
 };
 export const lumenChartLabels = Object.freeze({
+    count: 'Count',
+    density: 'Frequency density',
+    end: 'End',
+    invalidData: 'Chart data is invalid. Check the supplied values.',
+    start: 'Start',
     category: 'Category',
     chartData: 'Chart data',
     chartLegend: 'Chart legend',
     column: 'Column',
     empty: 'No chart data available.',
+    exploreData: 'Explore chart data',
+    formatDatumAction: (context) => `Open details: ${context}`,
     formatHeatmapSummary: (count) => count === 0 ?
         'No chart data available.' :
         `${count} available heatmap ${count === 1 ? 'cell' : 'cells'}.`,
@@ -88,9 +96,9 @@ export const getLumenChartDomain = (values, includeZero = true) => {
         max = Math.max(0, max);
     }
     if (min === max) {
-        const offset = Math.abs(min || 1) * 0.1;
-        min -= offset;
-        max += offset;
+        const offset = Math.max(Number.MIN_VALUE, Math.abs(min || 1) * 0.1);
+        min = Math.max(-Number.MAX_VALUE, min - offset);
+        max = Math.min(Number.MAX_VALUE, max + offset);
     }
     return { max, min };
 };
@@ -103,9 +111,12 @@ const resolveLumenChartDomain = (values, requested, includeZero) => {
 };
 export const scaleLumenChartValue = (value, domain, rangeStart, rangeEnd) => {
     const domainSize = domain.max - domain.min;
-    if (!Number.isFinite(value) || domainSize === 0)
+    if (!Number.isFinite(value) || !Number.isFinite(domain.min) || !Number.isFinite(domain.max) || domainSize === 0)
         return rangeStart;
-    const ratio = (value - domain.min) / domainSize;
+    // A valid domain can span opposite finite extremes whose difference overflows.
+    const ratio = Number.isFinite(domainSize) ?
+        (value - domain.min) / domainSize :
+        (value / 2 - domain.min / 2) / (domain.max / 2 - domain.min / 2);
     return rangeStart + ratio * (rangeEnd - rangeStart);
 };
 export const getLumenChartTicks = (domain, count = 5) => {
@@ -199,6 +210,83 @@ export const getLumenChartAxisPadding = (labels, minimum = 44) => {
     const estimated = widestLabelWidth + chartAxisLabelGap;
     return Math.min(maximumChartAxisPadding, Math.max(safeMinimum, estimated));
 };
+const fitLumenChartLabel = (label, maximumWidth) => {
+    if (estimateLumenChartAxisLabelWidth(label) <= maximumWidth)
+        return label;
+    const suffix = '…';
+    let result = '';
+    let width = estimateLumenChartAxisLabelWidth(suffix);
+    for (const character of label) {
+        width += Math.max(chartAxisLabelCharacterWidth, getLumenChartAxisCharacterWidth(character));
+        if (width > maximumWidth)
+            break;
+        result += character;
+    }
+    return result + suffix;
+};
+const getLumenChartTickAnchor = (index, count) => {
+    if (count === 1)
+        return 'middle';
+    if (index === 0)
+        return 'start';
+    return index === count - 1 ? 'end' : 'middle';
+};
+const selectLumenChartCategoryTicks = (candidates, gap) => {
+    const first = candidates[0];
+    const last = candidates.at(-1);
+    if (!first || !last)
+        return [];
+    if (candidates.length === 1)
+        return [first];
+    const lastStart = last.position - estimateLumenChartAxisLabelWidth(last.label);
+    const ticks = [first];
+    let previousEnd = first.position + estimateLumenChartAxisLabelWidth(first.label);
+    for (const candidate of candidates.slice(1, -1)) {
+        const halfWidth = estimateLumenChartAxisLabelWidth(candidate.label) / 2;
+        const labelStart = candidate.position - halfWidth;
+        const labelEnd = candidate.position + halfWidth;
+        if (labelStart < previousEnd + gap || labelEnd + gap > lastStart)
+            continue;
+        ticks.push(candidate);
+        previousEnd = labelEnd;
+    }
+    if (lastStart >= previousEnd + gap)
+        ticks.push(last);
+    return ticks;
+};
+const resolveLumenChartTickPositions = (count, end, positions, start) => {
+    const validPositions = positions?.length === count && positions.every((position, index) => (Number.isFinite(position) && position >= start && position <= end && position >= (positions[index - 1] ?? start)));
+    if (validPositions)
+        return positions;
+    return Array.from({ length: count }, (_, index) => (start + (count === 1 ? 0.5 : index / (count - 1)) * (end - start)));
+};
+/** Selects readable axis labels without changing or downsampling the underlying chart data. */
+export const getLumenChartCategoryTicks = (labels, { end, minimumGap = 16, positions, start }) => {
+    if (labels.length === 0 || !Number.isFinite(start) || !Number.isFinite(end) || end < start)
+        return [];
+    const gap = Number.isFinite(minimumGap) ? Math.max(0, minimumGap) : 16;
+    const resolvedPositions = resolveLumenChartTickPositions(labels.length, end, positions, start);
+    const span = (resolvedPositions.at(-1) ?? end) - (resolvedPositions[0] ?? start);
+    const maximumWidth = Math.max(0, labels.length === 1 ? end - start : (span - gap) / 2);
+    const candidates = labels.map((label, index) => ({
+        index,
+        label: fitLumenChartLabel(label, maximumWidth),
+        position: resolvedPositions[index] ?? start,
+        textAnchor: getLumenChartTickAnchor(index, labels.length)
+    }));
+    return selectLumenChartCategoryTicks(candidates, gap);
+};
+/** Axis labels prefer xLabel; detail labels prefer an explicitly supplied full formatter. */
+export const getLumenChartCategoryLabel = (series, category, formatCategory, context = 'axis') => {
+    if (context === 'detail' && formatCategory)
+        return formatCategory(category);
+    for (const item of series) {
+        const label = item.data.find(datum => datum.x === category)?.xLabel;
+        if (label !== undefined)
+            return label;
+    }
+    return formatCategory?.(category) ?? String(category);
+};
 export const resolveLumenChartTone = (tone, index = 0) => tone ?? lumenChartTones[index % 8] ?? 'series-1';
 export const getLumenChartToneClassName = (tone, index = 0) => lumenChartToneClassNames[resolveLumenChartTone(tone, index)];
 export const getLumenPieChartVariantClassName = (variant) => lumenPieChartVariantClassNames[variant];
@@ -302,6 +390,8 @@ export const getLumenChartNumericX = (value, scale) => {
     if (typeof value === 'number')
         return Number.isFinite(value) ? value : null;
     if (scale === 'linear') {
+        if (!value.trim())
+            return null;
         const numeric = Number(value);
         return Number.isFinite(numeric) ? numeric : null;
     }
@@ -454,7 +544,7 @@ export const createLumenBarGeometry = (series, options = {}) => {
     const layout = options.layout ?? 'grouped';
     const categories = getLumenChartCategories(series);
     const indexedSeries = series.map(indexLumenChartSeries);
-    const values = series.flatMap(item => item.data.map(datum => datum.y));
+    const values = indexedSeries.flatMap(item => [...item.values()].map(datum => datum.y));
     const calculatedDomain = layout === 'stacked' ?
         getStackedDomain(series, categories) :
         getLumenChartDomain(values);
@@ -465,11 +555,16 @@ export const createLumenBarGeometry = (series, options = {}) => {
     const margin = orientation === 'horizontal' ?
         {
             bottom: 24,
-            left: Math.max(64, Math.min(240, options.categoryWidth ?? 112)),
+            left: Math.max(64, Math.min(240, options.categoryWidth ?? getLumenChartAxisPadding(categories.map(category => getLumenChartCategoryLabel(series, category, options.formatCategory)), 112))),
             right: 20,
             top: 16
         } :
-        { bottom: 52, left: 52, right: 16, top: 16 };
+        {
+            bottom: 52,
+            left: getLumenChartAxisPadding(getLumenChartTicks(domain).map(tick => (options.formatValue ?? String)(tick)), 52),
+            right: 16,
+            top: 16
+        };
     const plotWidth = Math.max(1, width - margin.left - margin.right);
     const plotHeight = Math.max(1, height - margin.top - margin.bottom);
     const categorySize = (orientation === 'horizontal' ? plotHeight : plotWidth) /
@@ -487,9 +582,7 @@ export const createLumenBarGeometry = (series, options = {}) => {
         let negativeOffset = 0;
         categoryPositions.push({
             category,
-            label: series
-                .flatMap(item => item.data)
-                .find(datum => datum.x === category)?.xLabel ?? category,
+            label: getLumenChartCategoryLabel(series, category, options.formatCategory),
             x: orientation === 'horizontal' ?
                 margin.left - 8 :
                 categoryStart + usableCategorySize / 2,
@@ -557,6 +650,7 @@ export const createLumenBarGeometry = (series, options = {}) => {
         categories: categoryPositions,
         domain,
         height,
+        margin,
         marks,
         width
     };
@@ -622,8 +716,18 @@ const validateLumenChartDatumNumbers = (datum, context) => {
     }
 };
 const validateLumenChartDatumX = (datum, context) => {
-    if (context.xScale === 'categorical')
+    if (context.xScale === 'categorical') {
+        const key = lumenChartCategoryKey(datum.x);
+        if (context.categories.has(key)) {
+            context.issues.push({
+                code: 'duplicate-category',
+                message: 'Category x values must be unique within a series. Use xLabel for repeated display labels.',
+                path: `${context.path}.x`
+            });
+        }
+        context.categories.add(key);
         return context.previousX;
+    }
     const numericX = getLumenChartNumericX(datum.x, context.xScale);
     if (numericX === null) {
         context.issues.push({
@@ -661,9 +765,11 @@ export const validateLumenChartSeries = (series, xScale = 'categorical') => {
         }
         seriesIds.add(item.id);
         const datumIds = new Set();
+        const categories = new Set();
         let previousX = Number.NEGATIVE_INFINITY;
         for (const [datumIndex, datum] of item.data.entries()) {
             previousX = validateLumenChartDatum(datum, {
+                categories,
                 datumIds,
                 issues,
                 path: `${seriesPath}.data[${datumIndex}]`,
@@ -723,6 +829,68 @@ export const appendLumenChartDatum = (series, datum, maximumPoints = 500) => {
         data: data.slice(Math.max(0, data.length - safeMaximum))
     };
 };
+const getLumenScatterNumericX = (value, scale) => {
+    const numeric = getLumenChartNumericX(value, scale === 'log' ? 'linear' : scale);
+    return scale === 'log' && numeric !== null && numeric <= 0 ? null : numeric;
+};
+const validScatterDomain = (domain, scale) => {
+    const finite = Number.isFinite(domain.min) && Number.isFinite(domain.max);
+    return finite && domain.max > domain.min && (scale !== 'log' || domain.min > 0);
+};
+const getLumenScatterXDomain = (data, scale, requested) => {
+    const values = data.map(datum => getLumenScatterNumericX(datum.x, scale));
+    const calculated = scale === 'log' && !values.some(value => value !== null) ?
+        { min: 1, max: 10 } :
+        getLumenChartDomain(values, false);
+    const domain = { min: requested?.min ?? calculated.min, max: requested?.max ?? calculated.max };
+    if (!validScatterDomain(domain, scale))
+        throw new RangeError('Scatter x domain must be finite, ordered, and positive for log scales');
+    return domain;
+};
+export const scaleLumenScatterX = (value, domain, rangeStart, rangeEnd, scale = 'linear') => {
+    if (scale !== 'log')
+        return scaleLumenChartValue(value, domain, rangeStart, rangeEnd);
+    if (value <= 0 || !Number.isFinite(value))
+        return Number.NaN;
+    return scaleLumenChartValue(Math.log10(value), { min: Math.log10(domain.min), max: Math.log10(domain.max) }, rangeStart, rangeEnd);
+};
+export const getLumenScatterXTicks = (domain, scale) => scale === 'log' ?
+    getLumenChartTicks({ min: Math.log10(domain.min), max: Math.log10(domain.max) }).map(value => 10 ** value) :
+    getLumenChartTicks(domain);
+const scatterReferenceCoordinate = (value, fallback, project) => {
+    if (value === undefined)
+        return fallback;
+    return project(value);
+};
+const isLumenScatterReference = (value) => {
+    if (typeof value !== 'object' || value === null || !('id' in value) || !('label' in value))
+        return false;
+    if (typeof value.id !== 'string' || typeof value.label !== 'string')
+        return false;
+    return ['x', 'y', 'xEnd', 'yEnd'].every(key => {
+        const coordinate = Reflect.get(value, key);
+        return coordinate === undefined || (typeof coordinate === 'number' && Number.isFinite(coordinate));
+    });
+};
+export const createLumenScatterReferences = (references, geometry, scale = 'linear', padding = 44) => {
+    const result = [];
+    if (!Array.isArray(references))
+        return result;
+    const x = (value) => scaleLumenScatterX(value, geometry.xDomain, padding, geometry.width - padding, scale);
+    const y = (value) => scaleLumenChartValue(value, geometry.domain, geometry.height - padding, padding);
+    for (const reference of references) {
+        if (!isLumenScatterReference(reference))
+            continue;
+        const region = reference.xEnd !== undefined && reference.yEnd !== undefined;
+        const x1 = scatterReferenceCoordinate(reference.x, padding, x);
+        const y1 = scatterReferenceCoordinate(reference.y, padding, y);
+        const x2 = scatterReferenceCoordinate(reference.xEnd, reference.x === undefined ? geometry.width - padding : x1, x);
+        const y2 = scatterReferenceCoordinate(reference.yEnd, reference.y === undefined ? geometry.height - padding : y1, y);
+        if ([x1, x2, y1, y2].every(Number.isFinite))
+            result.push({ ...reference, x1, x2, y1, y2, region });
+    }
+    return result;
+};
 const resolveLumenScatterGeometryOptions = (options) => ({
     height: options.height ?? 320,
     maximumRadius: options.maximumRadius ?? 18,
@@ -734,7 +902,7 @@ const resolveLumenScatterGeometryOptions = (options) => ({
     xScale: options.xScale ?? 'linear'
 });
 const createLumenScatterPoint = (datum, context) => {
-    const numericX = getLumenChartNumericX(datum.x, context.xScale);
+    const numericX = getLumenScatterNumericX(datum.x, context.xScale);
     if (numericX === null || !isAvailableLumenChartY(datum.y))
         return null;
     const radius = datum.size === null || datum.size === undefined || !Number.isFinite(datum.size) || datum.size < 0 ?
@@ -746,20 +914,52 @@ const createLumenScatterPoint = (datum, context) => {
         seriesId: context.series.id,
         seriesLabel: context.series.label,
         tone: resolveLumenChartTone(datum.tone ?? context.series.tone, context.seriesIndex),
-        xCoordinate: scaleLumenChartValue(numericX, context.xDomain, context.padding, context.width - context.padding),
+        xCoordinate: scaleLumenScatterX(numericX, context.xDomain, context.padding, context.width - context.padding, context.xScale),
         yCoordinate: scaleLumenChartValue(datum.y, context.domain, context.height - context.padding, context.padding)
     };
 };
+const finiteLumenScatterBound = (value, fallback, scale) => (Number.isFinite(value) && (scale !== 'log' || value > 0) ? value : fallback);
+// Automatic extents leave room for the complete bubble, including its stroke.
+// Explicit bounds remain exact so consumers can intentionally crop a viewport.
+const padLumenScatterDomain = (domain, values, requested, extent, radius, scale = 'linear') => {
+    if (values.length === 0 || extent <= 0)
+        return domain;
+    const project = (value) => scale === 'log' ? Math.log10(value) : value;
+    const fromScale = (value) => scale === 'log' ? 10 ** value : value;
+    const min = project(domain.min);
+    const max = project(domain.max);
+    const inset = Math.min(radius + 2, extent / 4);
+    const extra = (max - min) * inset / (extent - 2 * inset);
+    const projected = values.map(project);
+    const bounds = projected.reduce((result, value) => ({
+        min: Math.min(result.min, value), max: Math.max(result.max, value)
+    }), { min: Number.POSITIVE_INFINITY, max: Number.NEGATIVE_INFINITY });
+    const paddedMin = fromScale(Math.min(min, bounds.min - extra));
+    const paddedMax = fromScale(Math.max(max, bounds.max + extra));
+    return {
+        min: requested?.min ?? finiteLumenScatterBound(paddedMin, domain.min, scale),
+        max: requested?.max ?? finiteLumenScatterBound(paddedMax, domain.max, scale)
+    };
+};
 export const createLumenScatterGeometry = (series, options = {}) => {
     const { height, maximumRadius: requestedMaximumRadius, minimumRadius: requestedMinimumRadius, padding, requestedDomain, requestedXDomain, width, xScale } = resolveLumenScatterGeometryOptions(options);
     const data = series.flatMap(item => item.data);
-    const projectedData = data.filter(datum => (getLumenChartNumericX(datum.x, xScale) !== null && isAvailableLumenChartY(datum.y)));
-    const domain = resolveLumenChartDomain(projectedData.map(datum => datum.y), requestedDomain, false);
-    const xDomain = getLumenChartXDomain(projectedData, xScale, requestedXDomain);
+    const projectedData = data.filter(datum => (getLumenScatterNumericX(datum.x, xScale) !== null && isAvailableLumenChartY(datum.y)));
+    const calculatedDomain = resolveLumenChartDomain(projectedData.map(datum => datum.y), requestedDomain, false);
+    if (!validScatterDomain(calculatedDomain, 'linear')) {
+        throw new RangeError('Scatter y domain must be finite and increasing');
+    }
+    const calculatedXDomain = getLumenScatterXDomain(projectedData, xScale, requestedXDomain);
     const sizes = projectedData.map(datum => (datum.size !== undefined && datum.size !== null && datum.size >= 0 ? datum.size : null));
     const sizeDomain = getLumenChartDomain(sizes, false);
     const minimumRadius = Math.max(1, requestedMinimumRadius);
     const maximumRadius = Math.max(minimumRadius, requestedMaximumRadius);
+    const yValues = projectedData.flatMap(datum => datum.y === null ? [] : [datum.y]);
+    const domain = padLumenScatterDomain(calculatedDomain, yValues, requestedDomain, height - padding * 2, maximumRadius);
+    const xDomain = padLumenScatterDomain(calculatedXDomain, projectedData.flatMap(datum => {
+        const value = getLumenScatterNumericX(datum.x, xScale);
+        return value === null ? [] : [value];
+    }), requestedXDomain, width - padding * 2, maximumRadius, xScale);
     const points = [];
     for (const [seriesIndex, item] of series.entries()) {
         for (const datum of item.data) {
@@ -788,6 +988,33 @@ const uniqueLumenChartCategories = (values) => {
         categories.set(lumenChartCategoryKey(value), value);
     return [...categories.values()];
 };
+const isHeatmapRecord = (value) => {
+    if (Array.isArray(value))
+        return false;
+    return typeof value === 'object' && value !== null;
+};
+const isHeatmapCoordinate = (value) => typeof value === 'string' || (typeof value === 'number' && Number.isFinite(value));
+const isOptionalHeatmapLabel = (value) => value === undefined || typeof value === 'string';
+const isHeatmapTone = (value) => {
+    if (value === undefined)
+        return true;
+    return lumenChartTones.some(tone => tone === value);
+};
+const isHeatmapDatum = (datum) => {
+    if (!isHeatmapRecord(datum))
+        return false;
+    return isHeatmapCoordinate(datum.x) && isHeatmapCoordinate(datum.y) &&
+        // Non-finite measurements are missing cells; coordinates still require finite numbers.
+        (datum.value === null || typeof datum.value === 'number') &&
+        [datum.id, datum.label, datum.xLabel, datum.yLabel].every(isOptionalHeatmapLabel) && isHeatmapTone(datum.tone);
+};
+/** Reject the whole decoded collection before adapters read or format cell fields. */
+export const normalizeLumenHeatmapData = (data) => {
+    if (!Array.isArray(data))
+        return [];
+    const rows = Array.from(data);
+    return rows.every(isHeatmapDatum) ? rows : [];
+};
 const createLumenHeatmapCell = (datum, context) => {
     const xIndex = context.xIndexes.get(lumenChartCategoryKey(datum.x));
     const yIndex = context.yIndexes.get(lumenChartCategoryKey(datum.y));
@@ -804,7 +1031,8 @@ const createLumenHeatmapCell = (datum, context) => {
         yCoordinate: yIndex * context.cellHeight
     };
 };
-export const createLumenHeatmapGeometry = (data, width = 640, height = 320) => {
+export const createLumenHeatmapGeometry = (rawData, width = 640, height = 320) => {
+    const data = normalizeLumenHeatmapData(rawData);
     const xCategories = uniqueLumenChartCategories(data.map(datum => datum.x));
     const yCategories = uniqueLumenChartCategories(data.map(datum => datum.y));
     const domain = getLumenChartDomain(data.map(datum => datum.value), false);
@@ -873,3 +1101,4 @@ export const createLumenRangeGeometry = (data, options = {}) => {
         points: segments.flat()
     };
 };
+export * from './extended-charts.js';

package/dist/code.js

@@ -320,7 +320,7 @@ const getMarkupTokenKind = (value, source, start) => {
         return 'symbol';
     const openingTagIndex = source.lastIndexOf('<', start);
     const closingTagIndex = source.lastIndexOf('>', start);
-    if (openingTagIndex < closingTagIndex)
+    if (openingTagIndex <= closingTagIndex)
         return undefined;
     const beforeValue = source
         .slice(openingTagIndex + 1, start)

package/dist/combobox.d.ts

@@ -0,0 +1,7 @@
+export interface LumenComboboxController {
+    close: () => void;
+    destroy: () => void;
+}
+/** Editable combobox. */
+export declare const createLumenComboboxController: (root: HTMLElement) => LumenComboboxController;
+//# sourceMappingURL=combobox.d.ts.map

package/dist/combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../src/combobox.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAyBD,yBAAyB;AACzB,eAAO,MAAM,6BAA6B,GAAI,MAAM,WAAW,KAAG,uBAwTjE,CAAA"}

package/dist/combobox.js

@@ -0,0 +1,253 @@
+let nextId = 0;
+const ignoresKeyboard = (event, composing) => event.defaultPrevented || event.isComposing || composing ||
+    event.altKey || event.ctrlKey || event.metaKey;
+const filterOption = (item, query, filterHidden, writeHidden) => {
+    const label = item.textContent.trim().toLowerCase();
+    const value = item.dataset.value?.toLowerCase() ?? '';
+    const hidden = Boolean(query) && !label.includes(query) && !value.includes(query);
+    if (hidden && !item.hidden) {
+        writeHidden(item, true);
+    }
+    else if (!hidden && filterHidden.has(item)) {
+        writeHidden(item, false);
+    }
+};
+/** Editable combobox. */
+export const createLumenComboboxController = (root) => {
+    const input = root.querySelector('input[role="combobox"]');
+    const list = root.querySelector('[role="listbox"]');
+    const document = root.ownerDocument;
+    const view = document.defaultView;
+    if (!input || !list || !view)
+        return { close: () => undefined, destroy: () => undefined };
+    const abort = new view.AbortController();
+    const { signal } = abort;
+    let active;
+    let composing = false;
+    let filtering = false;
+    let destroyed = false;
+    const filterHidden = new Set();
+    let resetTimer;
+    const eventRoot = root.getRootNode();
+    const observerRef = {};
+    const preserveVisibility = (records) => {
+        for (const record of records) {
+            if (record.attributeName === 'hidden') {
+                for (const option of filterHidden)
+                    if (option === record.target)
+                        filterHidden.delete(option);
+            }
+        }
+        for (const option of filterHidden) {
+            if (!list.contains(option)) {
+                option.hidden = false;
+                filterHidden.delete(option);
+            }
+        }
+    };
+    if (!list.id)
+        list.id = `ui-combobox-list-${++nextId}`;
+    input.setAttribute('aria-controls', list.id);
+    input.setAttribute('aria-autocomplete', 'list');
+    const items = () => [...list.querySelectorAll('[role="option"]')];
+    const editable = () => !input.matches(':disabled') && !input.readOnly;
+    const available = (item) => !item.hidden &&
+        !item.matches(':disabled, [disabled]') && item.getAttribute('aria-disabled') !== 'true';
+    const activate = (item) => {
+        active = item;
+        for (const option of items())
+            option.setAttribute('aria-selected', String(option === item));
+        if (item) {
+            if (!item.id)
+                item.id = `ui-combobox-option-${++nextId}`;
+            input.setAttribute('aria-activedescendant', item.id);
+        }
+        else {
+            input.removeAttribute('aria-activedescendant');
+        }
+    };
+    const close = () => {
+        input.setAttribute('aria-expanded', 'false');
+        if (!list.hidden)
+            list.hidden = true;
+        list.dataset.state = 'closed';
+        activate();
+    };
+    const flushVisibility = () => {
+        preserveVisibility(observerRef.current?.takeRecords() ?? []);
+    };
+    const writeHidden = (item, hidden) => {
+        flushVisibility();
+        if (hidden)
+            filterHidden.add(item);
+        else
+            filterHidden.delete(item);
+        item.hidden = hidden;
+        preserveVisibility(observerRef.current?.takeRecords().slice(1) ?? []);
+    };
+    const refresh = () => {
+        flushVisibility();
+        const query = input.value.trim().toLowerCase();
+        for (const item of items()) {
+            item.tabIndex = -1;
+            if (!item.id)
+                item.id = `ui-combobox-option-${++nextId}`;
+            if (filtering)
+                filterOption(item, query, filterHidden, writeHidden);
+        }
+        if (active && (!list.contains(active) || !available(active)))
+            activate();
+        if (!editable())
+            close();
+    };
+    const open = () => {
+        if (!editable())
+            return;
+        refresh();
+        input.setAttribute('aria-expanded', 'true');
+        list.hidden = false;
+        list.dataset.state = 'open';
+    };
+    const select = (item) => {
+        if (!editable() || !list.contains(item) || !available(item))
+            return;
+        input.value = item.dataset.value ?? item.textContent.trim();
+        input.dispatchEvent(new view.Event('input', { bubbles: true }));
+        input.dispatchEvent(new view.Event('change', { bubbles: true }));
+        input.focus({ preventScroll: true });
+        close();
+    };
+    const navigate = (key) => {
+        open();
+        const options = items().filter(available);
+        const index = active ? options.indexOf(active) : -1;
+        let next = (index + 1) % options.length;
+        if (key === 'ArrowUp') {
+            next = index < 0 ? options.length - 1 : (index - 1 + options.length) % options.length;
+        }
+        activate(options[next]);
+        if (typeof active?.scrollIntoView === 'function')
+            active.scrollIntoView({ block: 'nearest' });
+    };
+    const keydown = (event) => {
+        if (ignoresKeyboard(event, composing) || !editable())
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            navigate(event.key);
+            return;
+        }
+        switch (event.key) {
+            case 'Escape':
+                if (list.hidden)
+                    return;
+                event.preventDefault();
+                close();
+                break;
+            case 'Enter':
+                if (list.hidden || !active)
+                    return;
+                event.preventDefault();
+                select(active);
+                break;
+        }
+    };
+    const optionFromEvent = (event) => (items().find(option => event.composedPath().includes(option)));
+    refresh();
+    close();
+    input.addEventListener('focus', open, { signal });
+    input.addEventListener('compositionstart', () => {
+        composing = true;
+    }, { signal });
+    input.addEventListener('compositionend', () => {
+        composing = false;
+        filtering = true;
+        activate();
+        open();
+    }, { signal });
+    input.addEventListener('input', () => {
+        if (composing)
+            return;
+        filtering = true;
+        activate();
+        open();
+    }, { signal });
+    input.addEventListener('keydown', keydown, { signal });
+    eventRoot.addEventListener('reset', event => {
+        if (event.target !== input.form)
+            return;
+        view.clearTimeout(resetTimer);
+        resetTimer = view.setTimeout(() => {
+            if (destroyed || event.defaultPrevented || !input.isConnected)
+                return;
+            composing = false;
+            filtering = true;
+            close();
+            refresh();
+        });
+    }, { capture: true, signal });
+    list.addEventListener('pointerdown', event => {
+        if (optionFromEvent(event))
+            event.preventDefault();
+    }, { signal });
+    list.addEventListener('click', event => {
+        if (event.defaultPrevented)
+            return;
+        const option = optionFromEvent(event);
+        if (option) {
+            event.preventDefault();
+            select(option);
+        }
+    }, { signal });
+    const isNode = (target) => {
+        try {
+            view.Node.prototype.contains.call(target, null);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    };
+    root.addEventListener('focusout', event => {
+        if (!event.relatedTarget || !isNode(event.relatedTarget) || !root.contains(event.relatedTarget))
+            close();
+    }, { signal });
+    document.addEventListener('pointerdown', event => {
+        if (!event.composedPath().includes(root))
+            close();
+    }, { signal });
+    const observer = new view.MutationObserver(records => {
+        preserveVisibility(records);
+        if (!destroyed)
+            refresh();
+    });
+    observerRef.current = observer;
+    observer.observe(list, {
+        attributeFilter: ['disabled', 'aria-disabled', 'data-value', 'hidden'],
+        attributes: true,
+        characterData: true,
+        childList: true,
+        subtree: true
+    });
+    const disabledObserver = new view.MutationObserver(records => {
+        if (records.some(record => record.target.nodeName === 'FIELDSET' && record.target.contains(input)))
+            refresh();
+    });
+    disabledObserver.observe(eventRoot, { attributeFilter: ['disabled'], attributes: true, subtree: true });
+    observer.observe(input, { attributeFilter: ['disabled', 'readonly'], attributes: true });
+    return {
+        close,
+        destroy: () => {
+            destroyed = true;
+            view.clearTimeout(resetTimer);
+            abort.abort();
+            flushVisibility();
+            observer.disconnect();
+            disabledObserver.disconnect();
+            for (const option of filterHidden)
+                option.hidden = false;
+            filterHidden.clear();
+            close();
+        }
+    };
+};