Here's a page with the beginnings of a demo and some pointers to the js, css, and test files.

http://stevenblack.com/Projects/Javascript/jquery-ui/tests/visual/veneer/

As you can see it creates panels with otherwise generic content.

I think there are two worthwhile concepts in veneer so far:
1. :headerBelow and :headerAbove custom selectors are used with .nextUntil() for creating wrappable element groups based on a simple HTML header hierarchy.

1. Have a look at the uiVeneerTouched cumulator which is defined like this:

   // collection of elements created or modified by this widget, used for auto-destroy algorithm.
   uiVeneerTouched: { newElement: [], newWrapper: [], adorned: [] }, 
   

These arrays cumulate the elements touched by this widget which makes destroy() a snap. I think the ability to cumulate new elements, new wrappers, and elements adorned by widget-specific classes would be nice in the widget core.

Hey Steven,

no spec, yet. My focus is one extracting the parts of the accordion into this component that have nothing to do with the only-one-panel-open-at-a-time aspect. Once that is done, I'd look into rewriting accordion to extend this, and cleaning up the mess that accordion currently is.

In any case, we realized that we need a less restrictive accordion, and wanted this prototype to get an idea of the right approach. The spec will follow, then the finishing toches...

I'm definitely interested in seeing what you have started.

Hey Jorn, are you working from some sort of spec, or is this an experimantal skunk-works? (skunk-werke ?) If so, I can't seem to find it in the list at http://jqueryui.pbworks.com/

I've been working on something similar, which I'll post soon. It's a ui-veneer to wrap legacy HTML to bring-it into a jQuery-ui context. As such it is a "panel" (or "paneller") but without many of the aspects of an integrated panel UX that one can infuse when starting from scratch.

Hence my question about a spec...

How about this._bind( ".headers" ), { ... } ) -> this.widget().find( ".headers", { ... } )