inclusive-elements 0.6.0 → 0.7.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.7.0-beta.1](https://github.com/tobyzerner/inclusive-elements/compare/v0.6.1...v0.7.0-beta.1) (2026-08-18)
+
+
+### Features
+
+* add combobox and migrate to Vite Plus ([a125405](https://github.com/tobyzerner/inclusive-elements/commit/a1254058569c252625b5b5f1269b1cc6cc4a8143))
+
+### [0.6.1](https://github.com/tobyzerner/inclusive-elements/compare/v0.6.0...v0.6.1) (2026-03-23)
+
+
+### Bug Fixes
+
+* **demo:** hide reactions menu ([df0afa8](https://github.com/tobyzerner/inclusive-elements/commit/df0afa896688cf342f7c3d7808296f881aaaa1a7))
+* **menu:** return focus to root trigger on Escape and Tab ([9c9b28a](https://github.com/tobyzerner/inclusive-elements/commit/9c9b28ae181f42efd76abc10809ac1f4a7a6c9e6))
+* **tabs:** prevent attribute observer loop ([48e2043](https://github.com/tobyzerner/inclusive-elements/commit/48e2043350267b3fc7aa7b649b235d74d25cbc07))
+
 ## [0.6.0](https://github.com/tobyzerner/inclusive-elements/compare/v0.5.5...v0.6.0) (2026-03-23)
 
 ### Overview
@@ -355,4 +371,4 @@ The runtime surface is now centered on `ui-alerts`, `ui-menu`, `ui-tabs`, `ui-to
 [0.1.0-beta.5]: https://github.com/tobyzerner/inclusive-elements/compare/v0.1.0-beta.4...v0.1.0-beta.5
 [0.1.0-beta.4]: https://github.com/tobyzerner/inclusive-elements/compare/v0.1.0-beta.3...v0.1.0-beta.4
 [0.1.0-beta.3]: https://github.com/tobyzerner/inclusive-elements/compare/v0.1.0-beta.2...v0.1.0-beta.3
-[0.1.0-beta.2]: https://github.com/tobyzerner/inclusive-elements/compare/v0.1.0-beta.1...v0.1.0-beta.2
+[0.1.0-beta.2]: https://github.com/tobyzerner/inclusive-elements/compare/v0.1.0-beta.1...v0.1.0-beta.2

package/README.md

@@ -6,36 +6,41 @@
 
 `inclusive-elements` is a set of documented patterns and lightweight supporting elements for implementing common interface patterns.
 
--   **🦮 Accessible.** Built around native semantics and established inclusive interaction patterns.
--   **🌳 Lightweight.** Prefer the platform first, and only add JS where it meaningfully helps.
--   **🎨 Unstyled.** Bring your own design without fighting defaults.
--   **🚀 Easy to use.** Straightforward markup, small APIs, and designed for modern browsers with the platform features each pattern depends on.
+- **🦮 Accessible.** Built around native semantics and established inclusive interaction patterns.
+- **🌳 Lightweight.** Prefer the platform first, and only add JS where it meaningfully helps.
+- **🎨 Unstyled.** Bring your own design without fighting defaults.
+- **🚀 Easy to use.** Straightforward markup, small APIs, and designed for modern browsers with the platform features each pattern depends on.
 
 Each pattern in this library starts from the same question: what is the simplest, most inclusive way to build this on the platform today? Sometimes the answer is fully native HTML. Sometimes it is native HTML plus a small supporting custom element. The docs and demo are organized around patterns so you can start with the UI you need and immediately see the recommended implementation path.
 
 Runtime elements are only shipped for the patterns that still need behavior the platform does not provide directly:
-`ui-alerts`, `ui-menu`, `ui-tabs`, `ui-toolbar`, and `ui-tooltip`.
+`ui-alerts`, `ui-combobox`, `ui-menu`, `ui-tabs`, `ui-toolbar`, and `ui-tooltip`.
 The other pattern docs are native-first guidance, including the accessibility work authors still need to do in their own markup.
 
 ## Installation
 
 ```sh
-npm install inclusive-elements
+npm install inclusive-elements --save
 ```
 
-Patterns in this package rely on modern browser features such as the Popover API, hint popovers, CSS anchor positioning, `<details name>`, and `<dialog>`.
-
 ## Patterns
 
--   [Accordion](src/accordion/README.md): native `<details name>` for grouped disclosure sections.
--   [Alerts](src/alerts/README.md): `<ui-alerts>` for polite or assertive announcements, timed dismissal, and animated stacking.
--   [Disclosure](src/disclosure/README.md): native `<details>` and `<summary>`.
--   [Menu](src/menu/README.md): native `popover` for the surface, plus `<ui-menu>` for keyboard navigation, typeahead, and submenu coordination.
--   [Dialog](src/dialog/README.md): native `<dialog>` for modality and focus handling.
--   [Popover](src/popover/README.md): native `popover` plus CSS anchor positioning.
--   [Tabs](src/tabs/README.md): `<ui-tabs>` for button-based tab selection and panel visibility.
--   [Toolbar](src/toolbar/README.md): `<ui-toolbar>` for arrow-key focus management.
--   [Tooltip](src/tooltip/README.md): native hint popovers, plus `<ui-tooltip>` for owner resolution and interaction behavior.
+- [Accordion](src/accordion/README.md): native `<details name>` for grouped disclosure sections.
+- [Alerts](src/alerts/README.md): `<ui-alerts>` for polite or assertive announcements, timed dismissal, and animated stacking.
+- [Combobox](src/combobox/README.md): `<ui-combobox>` for progressively enhancing `<select>`, `<select multiple>`, and text-like `<input list>` controls.
+- [Disclosure](src/disclosure/README.md): native `<details>` and `<summary>`.
+- [Menu](src/menu/README.md): native `popover` for the surface, plus `<ui-menu>` for keyboard navigation, typeahead, and submenu coordination.
+- [Dialog](src/dialog/README.md): native `<dialog>` for modality and focus handling.
+- [Popover](src/popover/README.md): native `popover` plus CSS anchor positioning.
+- [Tabs](src/tabs/README.md): `<ui-tabs>` for button-based tab selection and panel visibility.
+- [Toolbar](src/toolbar/README.md): `<ui-toolbar>` for arrow-key focus management.
+- [Tooltip](src/tooltip/README.md): native hint popovers, plus `<ui-tooltip>` for owner resolution and interaction behavior.
+
+## Browser Support
+
+As of August 2026, full support across all patterns requires Chrome or Edge 151+, or Firefox 153+. This covers custom elements, the Popover API (including hint popovers), CSS anchor positioning, `<details name>`, and `<dialog>`.
+
+Safari 26 supports everything except hint popovers. Tooltips still work through JavaScript, but without native hint-popover stacking. The library is safe to adopt if you target the latest evergreen browsers and can accept this Safari limitation; otherwise, review support pattern by pattern or provide fallbacks.
 
 ## Contributing
 

package/dist/index.d.ts

@@ -0,0 +1,230 @@
+//#region src/alerts/alerts.d.ts
+type AlertPoliteness = 'polite' | 'assertive';
+type AlertOptions = {
+  key?: string;
+  duration?: number;
+  politeness?: AlertPoliteness;
+};
+declare class AlertsElement extends HTMLElement {
+  static duration: number;
+  static politeness: AlertPoliteness;
+  private timeouts;
+  private index;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  show(el: HTMLElement, options?: AlertOptions): string;
+  dismiss(el: HTMLElement): void;
+  dismiss(key: string): void;
+  clear(): void;
+  speak(message: string, options?: AlertOptions): void;
+  private dismissAlert;
+  private leaveAlert;
+  private startTimeout;
+  private clearTimeout;
+  private pauseOnInteraction;
+  private resumeOnInteraction;
+  private handleInteraction;
+  private getAlerts;
+  private syncAlertPoliteness;
+  private getAuthoredPoliteness;
+  private getAlertFromTarget;
+}
+//#endregion
+//#region src/combobox/combobox.d.ts
+declare class ComboboxElement extends HTMLElement {
+  private idPrefix;
+  private suppressedListId;
+  private sync;
+  private observer;
+  private listeners?;
+  private sourceState?;
+  private control?;
+  private tokens?;
+  private input?;
+  private listbox?;
+  private activeIndex;
+  private labelledBy;
+  private generatedLabelIds;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  refresh(): void;
+  private enhance;
+  private setupSource;
+  private observeSource;
+  private teardownSource;
+  private render;
+  private createGeneratedInput;
+  private createListbox;
+  private syncInputState;
+  private syncValidityState;
+  private addInputListeners;
+  private restoreInputAttributes;
+  private setInputAttribute;
+  private renderTokens;
+  private renderOptions;
+  private syncInputDisplay;
+  private onInput;
+  private onInputFocus;
+  private onInputClick;
+  private onKeyDown;
+  private onControlMouseDown;
+  private onControlClick;
+  private onWidgetKeyDown;
+  private onListboxClick;
+  private onFocusOut;
+  private onDocumentPointerDown;
+  private onLabelClick;
+  private onSourceUpdate;
+  private onFormReset;
+  private moveActive;
+  private showSuggestions;
+  private chooseOption;
+  private toggleOption;
+  private emitSourceUpdate;
+  private restoreCommittedText;
+  private open;
+  private close;
+  private dismiss;
+  private isOpen;
+  private get activeOption();
+  private syncActiveDescendant;
+  private scrollActiveOptionIntoView;
+  private enabledTokenButtons;
+  private optionForToken;
+  private filteredOptions;
+  private options;
+  private firstEnabledIndex;
+  private isOptionDisabled;
+  private optionLabel;
+  private isSelected;
+  private observeDatalist;
+  private discoverSource;
+  private isSupportedSource;
+  private get multiple();
+  private get editable();
+  private get sourceHidden();
+  private snapshotInputAttributes;
+  private createInputState;
+}
+//#endregion
+//#region src/menu/menu.d.ts
+declare class MenuElement extends HTMLElement {
+  static searchDelay: number;
+  static observedAttributes: string[];
+  private itemSync?;
+  private search;
+  private searchTimeout?;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+  private get horizontal();
+  private syncDocumentListeners;
+  private removeDocumentListeners;
+  private onDocumentClick;
+  private onDocumentKeyDown;
+  private onKeyDown;
+  private onClick;
+  private onMouseEnter;
+  private isActive;
+  private syncItems;
+  private getItems;
+  private getEnabledItems;
+  private isItemEnabled;
+  private belongsToThisMenu;
+  private getActiveItem;
+  private getItemForEvent;
+  private getRootTriggerForEvent;
+  private getTriggers;
+  private getParentMenuTrigger;
+  private getParentMenu;
+  private getSubmenu;
+  private openSubmenu;
+  private closeSubmenus;
+  private closeSelfAndDescendants;
+  private closeMenuTree;
+  private focusRootMenuTrigger;
+  private getRootMenuTrigger;
+  private handleTypeahead;
+  private updateTypeaheadSearch;
+  private findTypeaheadMatch;
+  private getItemLabel;
+  private showPopoverWithSource;
+}
+//#endregion
+//#region src/tabs/tabs.d.ts
+type SelectTabOptions = {
+  focus?: boolean;
+  emit?: boolean;
+};
+declare class TabsElement extends HTMLElement {
+  private idPrefix;
+  private structureSync?;
+  private managedPanelTabindex;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  selectTab(index: number, options?: SelectTabOptions): boolean;
+  private onKeyDown;
+  private onClick;
+  private syncStructure;
+  private get vertical();
+  private get tablist();
+  private tabPairs;
+  private getSelectedIndex;
+  private getEventTabIndex;
+  private applySelection;
+  private syncPanelTabindex;
+  private hasAuthorManagedTabindex;
+}
+//#endregion
+//#region src/toolbar/toolbar.d.ts
+declare class ToolbarElement extends HTMLElement {
+  private structureSync?;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  private onFocus;
+  private onKeyDown;
+  private syncControls;
+  private syncCurrentControl;
+  private get vertical();
+  private get controls();
+}
+//#endregion
+//#region src/tooltip/tooltip.d.ts
+declare class TooltipElement extends HTMLElement {
+  static delay: number;
+  static observedAttributes: string[];
+  private owner?;
+  private timeout?;
+  private sync;
+  private ownerObserver?;
+  private siblingObserver?;
+  private managedDescription?;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+  get disabled(): boolean;
+  set disabled(val: boolean);
+  show(owner?: HTMLElement | undefined): void;
+  hide(): void;
+  private onToggle;
+  private onDocumentKeyDown;
+  private syncOwner;
+  private resolveOwner;
+  private resolveExplicitOwner;
+  private setOwner;
+  private onOwnerFocusIn;
+  private onOwnerFocusOut;
+  private onOwnerPointerEnter;
+  private onTooltipPointerEnter;
+  private onInteractivePointerLeave;
+  private onOwnerClick;
+  private afterDelay;
+  private containsInteractiveTarget;
+  private updateManagedDescription;
+  private getDescriptionTokens;
+  private ensureTooltipId;
+  private supportsHoverInteraction;
+  private isOwnerDisabled;
+}
+//#endregion
+export { type AlertOptions, type AlertPoliteness, AlertsElement, ComboboxElement, MenuElement, TabsElement, ToolbarElement, TooltipElement };