@ComponentK profile picture
Component Kitchen @ComponentK

Web component experts

Joined January 2014
  • Tweets 109
  • Following 17
  • Followers 315
18 Photos and videos
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/release…
Photo carousel showing a bunny with a little flower icon indicating the selected image

ALT Photo carousel showing a bunny with a little flower icon indicating the selected image
3
4
Building a @storybookjs -like demo browser with #webcomponents — a much simpler way to get most of the benefits component.kitchen/blog/posts…

1
4
12
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!
5
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/release…
A multi-select list with several items selected and a different item active

ALT A multi-select list with several items selected and a different item active
1
4
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/SpinB…
2
5
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…
2
8
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…
1
9
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/FormE… in Chrome/Edge Canary.

1
1
4
A great background article on support forms in custom elements: web.dev/more-capable-form-co…

More capable form controls  |  Articles  |  web.dev

Build custom elements that work like built-in form controls.

web.dev
Vertical carousel
Customized drawer
Vertical drawer with grip
Component Kitchen retweeted
Elix@ElixElements
1 Jul 2019
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/Swipe…
1
1
Should the Elix project maintain React versions of its general-purpose, high quality UI components? component.kitchen/blog/posts…

1
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…
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/release…
1
1
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…
2
3
14
We’ve released @ElixElements v3.4. This includes a number of new #webcomponents and mixins in the ComboBox family. ListWithSearch captures the UI pattern used by VS Code, Chrome DevTools, and others for filtering and highlight as you type. github.com/elix/elix/release…
1
4
██████░░░░░░░░ @ElixElements progress report: our recent calendar components have us 43% of the way to our goal of well-designed, high-quality, performant, accessible, and intl web components for all common UI patterns component.kitchen/elix/visio…

2
2
5
Rendering a calendar in a UI (for interaction or data pres.) is made ferociously complex by date math and language/cultural expectations — hence a great candidate for a solid, general-purpose, customizable web component in @ElixElements 3.2! component.kitchen/elix/Calen…
Sample monthly calendars in the U.S., Great Britain, and France

ALT Sample monthly calendars in the U.S., Great Britain, and France

Sample monthly calendars in Japan, Kuwait, and India

ALT Sample monthly calendars in Japan, Kuwait, and India

Sample monthly calendar showing the phase of the moon

ALT Sample monthly calendar showing the phase of the moon
1
1
Load more