Component Kitchen

We've released Elix 15.0: mostly a clean-up release, but also supports the new CSS :--state syntax. E.g., you can style an elix-carousel's dots to look like flowers github.com/elix/elix/rele…

Building a @storybookjs -like demo browser with #webcomponents — a much simpler way to get most of the benefits component.kitchen/blog/posts/bui…

We’ve released @ElixElements 14.0: a substantial reworking for components like FilterListBox that let users navigate a subset of items; `value` properties that behave like the ones in native HTML; plus smashedeventnames with no spaces just like native HTML elements!

The new @ElixElements 13.0 release includes support for multi-select list boxes. This required work to separate the concepts of an active item and a selected item. github.com/elix/elix/rele…

We’ve released @ElixElements 12.1, with a new base class for your spin box-type components. Add units, custom numeric representation, design system, whatever you need. All docs now also include a nice diagram of a component’s class/mixin construction. component.kitchen/elix/SpinBox

The common pattern to have JS module automatically register #webcomponents has problems. @ElixElements now come in auto- and manually-registered flavors to give you more control, including loading of multiple component versions on the same page. component.kitchen/blog/posts/sup…

Web component APIs often expose internal framework methods/properties, which seems like asking for trouble. To create web components as solid as native HTML elements, @ElixElements 7.0 now hides all internal members behind symbols instead of string names. component.kitchen/blog/posts/hid…

A great background article on support forms in custom elements: web.dev/more-capable-f…

Look at that: All the custom elements in @ElixElement 6.0.6 now support the upcoming standard for use in HTML forms! A new mixin makes this feature easy to add to other elements. Demo: open component.kitchen/elix/FormEleme… in Chrome/Edge Canary.

Vertical carousel

Customized drawer

Vertical drawer with grip

@ElixElements 6.0.5 released w/ vertical drawers, plus drawers with grip handles so users know the drawer is there. One of the demos shows how components can be customized beyond what’s possible in CSS. component.kitchen/elix/DrawerWit…

Elix 6.0.3 adds something we’ve looked forward to doing for a long time: add swipe commands to lists in web apps! Supports touch on mobile, trackpad on desktop, coexists with keyboard/accessible list items. component.kitchen/elix/SwipeComm…

Should the Elix project maintain React versions of its general-purpose, high quality UI components? component.kitchen/blog/posts/sho…

We’ve released @ElixElements 6.0, which replaces a proprietary DOM update system with using the DOM API more directly. A small recalc engine designed for web components makes it work. Many thanks to @Rich_Harris for his talk on Svelte which inspired that. component.kitchen/blog/posts/a-s…

@ElixElements Because Elix components are designed to be recombined, even unexpected combinations — like putting a carousel inside a combo box — can work. component.kitchen/elix/customizi…

@ComponentK Building components with this flexibility in mind means that it's easy to take a combo box base class we built for selecting items from a list, use an international-aware calendar to fill the role of the popup content, and get an dropdown date picker. component.kitchen/elix/DateCombo…

The new release of @ElixElements 4.0.0 includes new interactive calendar components, new mixins for basic component tasks, and new customization facilities. github.com/elix/elix/rele…

@mjleitch @ElixElements No such mixin, and I’d need to be convinced a mixin is necessary, but we should have a ToggleButton base class that derives from Button. Would prob. define the state as button's `value`. Will try to get to it, or would welcome PR. DM if you’d like to follow up.

@ComponentK Is there an existing mixin similar to OpenCloseMixin but for active state semantics (i.e. ActiveInactiveMixin) for use on a ToggleButton?

Building great combo box #webcomponents is so much trickier than you'd think! Keyboard focus, mobile on-screen keyboards, and auto-complete all present surprises or significant challenges. component.kitchen/blog/posts/bui…