web-ui-pack

web-ui-pack is a universal web package providing highly scalable Web Components and helper utilities, with an emphasis on developer experience. It is written in TypeScript and ships with extensive JSDoc documentation, so editors can surface details about properties, options and usage through intellisense. Key characteristics described in the README: - Framework-agnostic: usable with Angular, React, Vue or plain HTML and JavaScript, since the logic is native to the browser and requires no external runtime. - Form controls come ready to use with built-in validation logic, and the project states a focus on web accessibility best practices. - Components are designed for inheritance and customization; defaults can be changed per class or per element, and behavior can be overridden via prototypes or subclassing. - CSS variables support custom color themes, and a dark color scheme is available by adding a `wupdark` attribute. - TypeScript types are included, along with `.jsx/.tsx` support for React/Preact. - Localization is handled through a `localeInfo` helper, with messages overridable via a global function. - Optimized for webpack tree-shaking via the side-effects option; the package has zero dependencies. - The project claims 100% test coverage through unit and e2e tests, and states a focus on performance and low memory consumption. Components listed as available include DropdownElement, SortElement, SpinElement, CircleElement, PopupElement, ModalElement (with modal-in-modal, confirm modal, confirm hook and modal form), Notify, FormElement, and a set of controls: SwitchControl, CheckControl, RadioControl, TextControl (with mask/pattern), TextareaControl, PasswordControl, NumberControl, SelectControl, SelectManyControl, TimeControl, DateControl and CalendarControl. Several items are marked as not yet done, such as SliderControl, FileControl, ImageControl, ColorControl, MediaPlayer, InfiniteScroll, VirtualScroll, CarouselElement and TableElement. Helpers are grouped by area: animation (animateDropdown, animateStack), DOM (findScrollParent, focusFirst, isIntoView, scrollIntoView, WUPScrolled), date (dateCompareWithoutTime, dateCopyTime, dateFromString, dateToString), math (mathFixFP, mathScaleValue, mathRotate), object (nestedProperty, objectClone, objectToFormData, observer), event (onEvent, onFocusGot, onScroll, onScrollStop, onFocusLost, onSpy), string (stringLowerCount, stringUpperCount, stringPrettify), other (promiseWait, localeInfo, TimeObject) and files (zip, exportToExcel, saveAsFile, csv). Installation is via npm, followed by importing a component and calling its static `$use()` method to register the custom element. The README also documents VSCode settings for HTML custom data, notes that the library is compiled to ESNext and may need to be included in babel-loader for older browsers, and provides troubleshooting guidance for unrecognized tags.