basic-component-mixins - npm Package Compare versions

Comparing version 0.0.1 to 0.0.3

package.json

 {
   "name": "basic-component-mixins",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Mixins applied toward the implementation of basic-web-components",
@@ -15,3 +15,6 @@ "homepage": "https://component.kitchen",
   "dependencies": {
+  },
+  "browserify": {
+    "transform": ["babelify"]
   }
-}
+}

README.md

@@ -1,3 +0,532 @@
-# basic-component-mixins
+<a name="AttributeMarshalling"></a>
+## AttributeMarshalling
+Mixin which marshalls attributes to properties (and eventually
+vice versa)
 
-Mixins applied toward the implementation of basic-web-components.
+This only supports string properties for now.
+
+**Kind**: global class  
+<a name="AutomaticNodeFinding"></a>
+## AutomaticNodeFinding
+Mixin to create references to elements in a component's Shadow
+DOM subtree
+
+This adds a member on the component called `$` that can be used to reference
+elements with IDs. E.g., if component's shadow contains an element
+`<button id="foo">`, then this mixin will create a member `this.$.foo` that
+points to that button. Such references simplify a component's access to its
+own elements.
+
+This trades off a one-time cost of querying all elements in the shadow tree
+against having to query for an element each time the component wants to
+inspect or manipulate it.
+
+This mixin is inspired by Polymer's automatic node finding feature.
+See https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding.
+
+**Kind**: global class  
+<a name="ChildrenContent"></a>
+## ChildrenContent
+Mixin which defines a component's content as its children. Changes
+in the content will be tracked, and a contentChanged method will be invoked
+on the component when its children change.
+
+**Kind**: global class  
+<a name="ClickSelection"></a>
+## ClickSelection
+Mixin which maps a click (actually, a mousedown) to selection
+
+If the user clicks an element, and the element is an item in the list, then
+the component's selectedIndex will be set to the index for that item.
+
+**Kind**: global class  
+<a name="Collective"></a>
+## Collective
+A group of elements that have been joined together for the purpose of
+accomplishing some collective behavior, e.g., keyboard handling.
+
+This is not a mixin, but a class used by the CollectiveMember mixin.
+
+**Kind**: global class  
+<a name="CollectiveMember"></a>
+## CollectiveMember
+Mixin which allows a component to provide aggregate behavior with
+other elements, e.g., for keyboard handling
+
+**Kind**: global class  
+<a name="Composable"></a>
+## Composable
+Mixin to make a class more easily composable with other mixins
+
+The main contribution is the introduction of a `compose` method that applies
+a set of mixin functions and returns the resulting new class. This sugar
+can make the application of many mixins at once easier to read.
+
+**Kind**: global class  
+<a name="ContentFirstChildTarget"></a>
+## ContentFirstChildTarget
+Mixin that defines the target of a component -- the element the
+component is managing or somehow responsible for -- as its first child
+
+**Kind**: global class  
+<a name="ContentItems"></a>
+## ContentItems
+Mixin which maps content semantics (children) to list item
+semantics
+
+Items differ from children in several ways:
+
+* They can be referenced via index.
+* They can have a selection state.
+* Auxiliary invisible child elements are filtered out and not counted as
+  items. Auxiliary elements include link, script, style, and template
+  elements.
+
+**Kind**: global class  
+<a name="DirectionSelection"></a>
+## DirectionSelection
+Mixin which maps direction semantics (goLeft, goRight, etc.) to
+selection semantics (selectPrevious, selectNext, etc.)
+
+**Kind**: global class  
+<a name="Generic"></a>
+## Generic
+Mixin that allows a component to support a "generic" style: a
+minimalist style that can easily be removed to reset its visual appearance to
+a baseline state
+
+By default, a component should provide a minimal visual presentation that
+allows the component to function. However, the more styling the component
+provides by default, the harder it becomes to get the component to fit in
+in other settings. Each CSS rule has to be overridden. Worse, new CSS rules
+added to the default style won't be overridden by default, making it hard to
+know whether a new version of a component will still look okay.
+
+As a compromise, the simple Polymer behavior here defines a "generic"
+attribute. This attribute is normally set by default, and styles can be
+written that apply only when the generic attribute is set. This allows the
+construction of CSS rules that will only apply to generic components like
+
+    :host([generic=""]) {
+      ...
+    }
+
+This makes it easy to remove all default styling -- set the generic attribute
+to false, and all default styling will be removed.
+
+**Kind**: global class  
+<a name="ItemsAccessible"></a>
+## ItemsAccessible
+Mixin which manages ARIA roles for a component that wants to act
+as a list
+
+**Kind**: global class  
+<a name="ItemsSelection"></a>
+## ItemsSelection
+Mixin which manages selection semantics for items in a list
+
+**Kind**: global class  
+<a name="Keyboard"></a>
+## Keyboard
+Mixin which manages the keydown handling for a component
+
+TODO: Document collective behavior.
+TODO: Provide baseline behavior outside of a collective.
+
+**Kind**: global class  
+<a name="KeyboardDirection"></a>
+## KeyboardDirection
+Mixin which maps direction keys (Left, Right, etc.) to direction
+semantics (goLeft, goRight, etc.)
+
+**Kind**: global class  
+<a name="KeyboardPagedSelection"></a>
+## KeyboardPagedSelection
+Mixin which maps page keys (Page Up, Page Down) into operations
+that move the selection by one page
+
+The keyboard interaction model generally follows that of Microsoft Windows'
+list boxes instead of those in OS X:
+
+* The Page Up/Down and Home/End keys actually change the selection, rather
+  than just scrolling. The former behavior seems more generally useful for
+  keyboard users.
+
+* Pressing Page Up/Down will change the selection to the topmost/bottommost
+  visible item if the selection is not already there. Thereafter, the key
+  will move the selection up/down by a page, and (per the above point) make
+  the selected item visible.
+
+To ensure the selected item is in view following use of Page Up/Down, use the
+related SelectionScroll mixin.
+
+**Kind**: global class  
+<a name="KeyboardPrefixSelection"></a>
+## KeyboardPrefixSelection
+Mixin that handles list box-style prefix typing, in which the user
+can type a string to select the first item that begins with that string
+
+**Kind**: global class  
+<a name="SelectionHighlight"></a>
+## SelectionHighlight
+Mixin which applies standard highlight colors to a selected item
+
+**Kind**: global class  
+<a name="SelectionScroll"></a>
+## SelectionScroll
+Mixin which scrolls a container to keep the selected item visible
+
+**Kind**: global class  
+<a name="SwipeDirection"></a>
+## SwipeDirection
+Mixin which maps touch gestures (swipe left, swipe right) to direction
+semantics (goRight, goLeft)
+
+**Kind**: global class  
+<a name="TargetSelection"></a>
+## TargetSelection
+Mixin that allows a component to delegate its own selection
+semantics to a target element
+
+This is useful when defining components that act as optional decorators for a
+component that acts like a list.
+
+**Kind**: global class  
+<a name="TemplateStamping"></a>
+## TemplateStamping
+Mixin for stamping a template into a Shadow DOM subtree upon
+component instantiation
+
+If a component defines a template property (as a string or referencing a HTML
+template), when the component class is instantiated, a shadow root will be
+created on the instance, and the contents of the template will be cloned into
+the shadow root.
+
+For the time being, this extension retains support for Shadow DOM v0.
+That will eventually be deprecated as browsers implement Shadow DOM v1.
+
+**Kind**: global class  
+<a name="TimerSelection"></a>
+## TimerSelection
+Mixin provides for automatic timed changes in selection, as in a
+automated slideshow
+
+**Kind**: global class  
+<a name="TrackpadDirection"></a>
+## TrackpadDirection
+Mixin which maps a horizontal trackpad swipe gestures (or
+horizontal mouse wheel actions) to direction semantics
+
+To respond to the trackpad, we can listen to the DOM's "wheel" events. These
+events are fired as the user drags their fingers across a trackpad.
+Unfortunately, this scheme is missing a critical event — there is no event
+when the user *stops* a gestured on the trackpad.
+
+To complicate matters, the mainstream browsers continue to generate wheel
+events even after the user has stopped dragging their fingers. These fake
+events simulate the user gradually slowing down the drag until they come to a
+smooth stop. In some contexts, these fake wheel events might be helpful, but
+in trying to supply typical trackpad swipe navigation, these fake events get
+in the way.
+
+This component uses some heuristics to work around these problems, but the
+complex nature of the problem make it extremely difficult to achieve the same
+degree of trackpad responsiveness possible with native applications.
+
+**Kind**: global class  
+<a name="composeTemplates"></a>
+## composeTemplates
+Given two templates, this "folds" one inside the other
+
+For now, the folding process just entails putting the first inside the
+location of the first <content> node in the second template.
+
+Example: if the first (sub) template is
+
+  <template>
+    Hello, <slot></slot>.
+  </template>
+
+and the second (base) template is
+
+  <template>
+    <b>
+      <slot></slot>
+    </b>
+  </template>
+
+Then the returned folded template is
+
+  <template>
+    <b>
+      Hello, <slot></slot>.
+    </b>
+  </template>
+
+**Kind**: global class  
+<a name="undefinedcontent"></a>
+## undefinedcontent : <code>Array</code>
+The flattened content of this component.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| content | 
+
+<a name="undefineditems"></a>
+## undefineditems
+The current set of items in the list.
+
+**Kind**: global variable  
+**Properties**
+
+| Name | Type |
+| --- | --- |
+| items | <code>object</code> | 
+
+<a name="undefinedgeneric"></a>
+## undefinedgeneric : <code>Boolean</code>
+True if the component would like to receive generic styling.
+
+This property is true by default — set it to false to turn off all
+generic styles. This makes it easier to apply custom styling; you won't
+have to explicitly override styling you don't want.
+
+**Kind**: global variable  
+**Default**: <code>true</code>  
+**Properties**
+
+| Name |
+| --- |
+| generic | 
+
+<a name="undefinedselectedIndex"></a>
+## undefinedselectedIndex : <code>Number</code>
+The index of the item which is currently selected, or -1 if there is no
+selection.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| selectedIndex | 
+
+<a name="undefinedselectedItem"></a>
+## undefinedselectedItem : <code>Object</code>
+The currently selected item, or null if there is no selection.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| selectedItem | 
+
+<a name="undefinedselectionRequired"></a>
+## undefinedselectionRequired : <code>Boolean</code>
+True if the list should always have a selection (if it has items).
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| selectionRequired | 
+
+<a name="undefinedscrollTarget"></a>
+## undefinedscrollTarget
+The element that should be scrolled with the Page Up/Down keys.
+Default is the current element.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| scrollTarget | 
+
+<a name="undefinedscrollTarget"></a>
+## undefinedscrollTarget
+The element that should be scrolled with the Page Up/Down keys.
+Default is the current element.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| scrollTarget | 
+
+<a name="undefinedposition"></a>
+## undefinedposition : <code>Number</code>
+The distance the user has moved the first touchpoint since the beginning
+of a drag, expressed as a fraction of the element's width.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| position | 
+
+<a name="undefinedselectedIndex"></a>
+## undefinedselectedIndex : <code>Number</code>
+The index of the item which is currently selected, or -1 if there is no
+selection.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| selectedIndex | 
+
+<a name="undefinedselectedItem"></a>
+## undefinedselectedItem : <code>Object</code>
+The currently selected item, or null if there is no selection.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| selectedItem | 
+
+<a name="undefinedplaying"></a>
+## undefinedplaying : <code>Boolean</code>
+True if the selection is being automatically advanced.
+
+**Kind**: global variable  
+**Properties**
+
+| Name |
+| --- |
+| playing | 
+
+<a name="undefinedcompose"></a>
+## undefinedcompose()
+Apply a set of mixin functions or mixin objects to the present class and
+return the new class.
+
+A call like
+
+    let MyClass = Mixin1(Mixin2(Mixin3(Mixin4(Mixin5(BaseClass)))));
+
+Can be converted to:
+
+    let MyClass = Composable(BaseClass).compose(
+      Mixin1,
+      Mixin2,
+      Mixin3,
+      Mixin4,
+      Mixin5
+    );
+
+This function can also take mixin objects. A mixin object is just a
+shorthand for a mixin function that creates a new subclass with the given
+members. The mixin object's members are *not* copied directly onto the
+prototype of the base class, as with traditional mixins.
+
+**Kind**: global function  
+<a name="indexOfItem"></a>
+## indexOfItem(item) ⇒ <code>number</code>
+Returns the positional index for the indicated item.
+
+Because this acts like a getter, this does not invoke a base implementation.
+
+**Kind**: global function  
+**Returns**: <code>number</code> - The index of the item, or -1 if not found.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| item | <code>object</code> | The item whose index is requested. |
+
+<a name="selectFirst"></a>
+## selectFirst()
+Select the first item in the list.
+
+**Kind**: global function  
+<a name="selectLast"></a>
+## selectLast()
+Select the last item in the list.
+
+**Kind**: global function  
+<a name="selectNext"></a>
+## selectNext()
+Select the next item in the list.
+
+**Kind**: global function  
+<a name="selectPrevious"></a>
+## selectPrevious()
+Select the previous item in the list.
+
+**Kind**: global function  
+<a name="pageDown"></a>
+## pageDown()
+Scroll down one page.
+
+**Kind**: global function  
+<a name="pageUp"></a>
+## pageUp()
+Scroll up one page.
+
+**Kind**: global function  
+<a name="selectItemWithTextPrefix"></a>
+## selectItemWithTextPrefix(prefix)
+Select the first item whose text content begins with the given prefix.
+
+**Kind**: global function  
+
+| Param | Description |
+| --- | --- |
+| prefix | [String] The string to search for |
+
+<a name="scrollItemIntoView"></a>
+## scrollItemIntoView()
+Scroll the given element completely into view, minimizing the degree of
+scrolling performed.
+
+Blink has a scrollIntoViewIfNeeded() function that almost the same thing,
+but unfortunately it's non-standard, and in any event often ends up
+scrolling more than is absolutely necessary.
+
+**Kind**: global function  
+<a name="play"></a>
+## play()
+Begin automatic progression of the selection.
+
+**Kind**: global function  
+<a name="pause"></a>
+## pause()
+Pause automatic progression of the selection.
+
+**Kind**: global function  
+<a name="event_items-changed"></a>
+## "items-changed"
+Fires when the items in the list change.
+
+**Kind**: event emitted  
+<a name="event_selected-item-changed"></a>
+## "selected-item-changed"
+Fires when the selectedItem property changes.
+
+**Kind**: event emitted  
+
+| Param | Description |
+| --- | --- |
+| detail.selectedItem | The new selected item. |
+| detail.previousItem | The previously selected item. |
+
+<a name="event_selected-item-changed"></a>
+## "selected-item-changed"
+Fires when the selectedIndex property changes.
+
+**Kind**: event emitted  
+
+| Param | Description |
+| --- | --- |
+| detail.selectedIndex | The new selected index. |
+

src/AttributeMarshalling.js

 /**
- * Marshall attributes to properties (and eventually vice versa).
- * Only supports string properties for now.
+ * @class AttributeMarshalling
+ * @classdesc Mixin which marshalls attributes to properties (and eventually
+ * vice versa)
  *
- * @mixin AttributeMarshalling
+ * This only supports string properties for now.
  */
 
+
 export default (base) => class AttributeMarshalling extends base {
@@ -9,0 +11,0 @@

src/AutomaticNodeFinding.js

 /**
- * Mixin to support Polymer-style automatic node finding.
+ * @class AutomaticNodeFinding
+ * @classdesc Mixin to create references to elements in a component's Shadow
+ * DOM subtree
  *
@@ -14,7 +16,7 @@ * This adds a member on the component called `$` that can be used to reference
  *
+ * This mixin is inspired by Polymer's automatic node finding feature.
  * See https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding.
- *
- * @mixin AutomaticNodeFinding
  */
 
+
 export default (base) => class AutomaticNodeFinding extends base {
@@ -21,0 +23,0 @@

src/ChildrenContent.js

 /**
- * Mixin that defines a component's content as its children.
- *
- * @mixin ChildrenContent
+ * @class ChildrenContent
+ * @classdesc Mixin which defines a component's content as its children. Changes
+ * in the content will be tracked, and a contentChanged method will be invoked
+ * on the component when its children change.
  */
 
-// TODO: Factor content change tracking into its own mixin.
+
 // TODO: Don't respond to changes in attributes, or at least offer that as an
@@ -15,8 +16,12 @@ // option.
     if (super.createdCallback) { super.createdCallback(); }
-    // Until we have content observing again, force a call to contentChanged().
-    // HACK: Do this asynchronously, so other mixins have a chance to set up
-    // before this call.
-    setTimeout(() => this.contentChanged());
+    observeContentChanges(this);
 
-    observeContentChanges(this);
+    // Make an initial call to contentChanged() so that the component can do
+    // initialization that it normally does when content changes.
+    //
+    // This will invoke contentChanged() handlers in other mixins. In order that
+    // those mixins have a chance to complete their own initialization, we add
+    // the contentChanged() call to the microtask queue via a promise.
+    // See https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
+    Promise.resolve().then(() => this.contentChanged());
   }
@@ -30,2 +35,8 @@
 
+  initialized() {
+    // Make an initial call to contentChanged() so that the component can do
+    // initialization that it normally does when content changes.
+    this.contentChanged();
+  }
+
   /**
@@ -35,3 +46,3 @@ * The flattened content of this component.
    * @property content
-   * @type [Object]
+   * @type Array
    */
@@ -90,7 +101,7 @@ get content() {
   let expanded = Array.prototype.map.call(nodes, node => {
-    // We want to see if the node is an instanceof HTMLContentElement, but
+    // We want to see if the node is an instanceof HTMLSlotELement, but
     // that class won't exist if the browser that doesn't support native
     // Shadow DOM and if the Shadow DOM polyfill hasn't been loaded. Instead,
-    // we do a simplistic check to see if the tag name is "content".
-    if (node.localName && node.localName === "content") {
+    // we do a simplistic check to see if the tag name is "slot" or "content".
+    if (node.localName && (node.localName === "slot" || node.localName === "content")) {
       // content element; use its distributed nodes instead.
@@ -97,0 +108,0 @@ let distributedNodes = node.getDistributedNodes();

src/ClickSelection.js

 /**
- * Mixin which maps a click (actually, a mousedown) to selection.
+ * @class ClickSelection
+ * @classdesc Mixin which maps a click (actually, a mousedown) to selection
  *
  * If the user clicks an element, and the element is an item in the list, then
  * the component's selectedIndex will be set to the index for that item.
- *
- * @mixin ClickSelection
  */
 
+
 export default (base) => class ClickSelection extends base {
@@ -11,0 +11,0 @@

src/Composable.js

 /**
- * Mixin to make a class more easily composable with other mixins.
+ * @class Composable
+ * @classdesc Mixin to make a class more easily composable with other mixins
  *
@@ -7,4 +8,2 @@ * The main contribution is the introduction of a `compose` method that applies
  * can make the application of many mixins at once easier to read.
- *
- * @mixin Composable
  */
@@ -11,0 +10,0 @@

src/composeTemplates.js

@@ -1,6 +0,8 @@
-/*
- * Given two templates, "fold" one inside the other. For now, this just entails
- * putting the first inside the location of the first <content> node in the
- * second template.
+/**
+ * @class composeTemplates
+ * @classdesc Given two templates, this "folds" one inside the other
  *
+ * For now, the folding process just entails putting the first inside the
+ * location of the first <content> node in the second template.
+ *
  * Example: if the first (sub) template is
@@ -28,2 +30,4 @@ *
  */
+
+
 export default function composeTemplates(baseTemplate, mixinTemplate) {
@@ -30,0 +34,0 @@

src/ContentFirstChildTarget.js

 /**
- * Mixin that defines the target of a component -- the element the component is
- * managing or somehow responsible for -- as its first child.
- *
- * @mixin ContentFirstChildTarget
+ * @class ContentFirstChildTarget
+ * @classdesc Mixin that defines the target of a component -- the element the
+ * component is managing or somehow responsible for -- as its first child
  */
 
+
 export default (base) => class ContentFirstChildTarget extends base {
@@ -9,0 +9,0 @@

src/ContentItems.js

 /**
- * Mixin that maps content semantics (children) to list item semantics.
+ * @class ContentItems
+ * @classdesc Mixin which maps content semantics (children) to list item
+ * semantics
  *
@@ -11,6 +13,5 @@ * Items differ from children in several ways:
  *   elements.
- *
- * @mixin ContentItems
  */
 
+
 export default (base) => class ContentItems extends base {
@@ -32,8 +33,9 @@
    *
+   * Because this acts like a getter, this does not invoke a base implementation.
+   *
    * @method indexOfItem
-   * @param {Object} item The item whose index is requested.
-   * @returns {Number} The index of the item, or -1 if not found.
+   * @param {object} item The item whose index is requested.
+   * @returns {number} The index of the item, or -1 if not found.
    */
   indexOfItem(item) {
-    if (super.indexOfItem) { super.indexOfItem(item); }
     return this.items.indexOf(item);
@@ -64,4 +66,3 @@ }
    *
-   * @property items
-   * @type [Object]
+   * @property {object} items
    */
@@ -68,0 +69,0 @@ // TODO: property notifications so elements can bind to this property

src/DirectionSelection.js

 /**
- * Mixin which maps direction semantics (goLeft, goRight, etc.) to selection
- * semantics (selectPrevious, selectNext, etc.).
- *
- * @mixin DirectionSelection
+ * @class DirectionSelection
+ * @classdesc Mixin which maps direction semantics (goLeft, goRight, etc.) to
+ * selection semantics (selectPrevious, selectNext, etc.)
  */
@@ -7,0 +6,0 @@

src/Generic.js

 /**
- * Mixin that allows a component to support a "generic" style: a minimalist
- * style that can easily be removed to reset its visual appearance to a baseline
- * state.
+ * @class Generic
+ * @classdesc Mixin that allows a component to support a "generic" style: a
+ * minimalist style that can easily be removed to reset its visual appearance to
+ * a baseline state
  *
@@ -26,2 +27,3 @@ * By default, a component should provide a minimal visual presentation that
 
+
 export default (base) => class Generic extends base {
@@ -28,0 +30,0 @@

src/ItemsAccessible.js

 /**
- * Mixin which manages ARIA roles for a component that wants to act as a list.
- *
- * @mixin ItemsAccessible
+ * @class ItemsAccessible
+ * @classdesc Mixin which manages ARIA roles for a component that wants to act
+ * as a list
  */
@@ -86,3 +86,3 @@
     // Catch the case where the selection is removed.
-    if (item == null) {
+    if (item == null && this.collective) {
       this.collective.outermostElement.removeAttribute('aria-activedescendant');
@@ -89,0 +89,0 @@ }

src/Keyboard.js

 /**
- * Mixin which manages the keydown handling for a component.
+ * @class Keyboard
+ * @classdesc Mixin which manages the keydown handling for a component
  *
  * TODO: Document collective behavior.
  * TODO: Provide baseline behavior outside of a collective.
- *
- * @mixin Keyboard
  */
@@ -9,0 +8,0 @@

src/KeyboardDirection.js

 /**
- * Mixin which maps direction keys (Left, Right, etc.) to direction semantics
- * (goLeft, goRight, etc.).
- *
- * @mixin KeyboardDirection
+ * @class KeyboardDirection
+ * @classdesc Mixin which maps direction keys (Left, Right, etc.) to direction
+ * semantics (goLeft, goRight, etc.)
  */
@@ -7,0 +6,0 @@

src/KeyboardPagedSelection.js

 /**
- * Mixin which maps page keys (Page Up, Page Down) into operations that move
- * the selection by one page.
+ * @class KeyboardPagedSelection
+ * @classdesc Mixin which maps page keys (Page Up, Page Down) into operations
+ * that move the selection by one page
  *
@@ -13,12 +14,11 @@ * The keyboard interaction model generally follows that of Microsoft Windows'
  * * Pressing Page Up/Down will change the selection to the topmost/bottommost
- *   visible item if the selection is not already there. Thereafter, the key will
- *   move the selection up/down by a page, and (per the above point) make the
- *   selected item visible.
+ *   visible item if the selection is not already there. Thereafter, the key
+ *   will move the selection up/down by a page, and (per the above point) make
+ *   the selected item visible.
  *
  * To ensure the selected item is in view following use of Page Up/Down, use the
  * related SelectionScroll mixin.
- *
- * @mixin KeyboardPagedSelection
  */
 
+
 export default (base) => class KeyboardPagedSelection extends base {
@@ -25,0 +25,0 @@

src/KeyboardPrefixSelection.js

 /**
- * Mixin that handles list box-style prefix typing, in which the user can type a
- * string to select the first item that begins with that string.
- *
- * @mixin KeyboardPrefixSelection
+ * @class KeyboardPrefixSelection
+ * @classdesc Mixin that handles list box-style prefix typing, in which the user
+ * can type a string to select the first item that begins with that string
  */
 
+
 // TODO: If the selection is changed by some other means (e.g., arrow keys) other
@@ -9,0 +9,0 @@ // than prefix typing, then that act should reset the prefix.

src/SelectionHighlight.js

 /**
- * Mixin which applies standard highlight colors to a selected item.
- *
- * @mixin SelectionHighlight
+ * @class SelectionHighlight
+ * @classdesc Mixin which applies standard highlight colors to a selected item
  */
+ 
 
@@ -7,0 +7,0 @@ export default (base) => class SelectionHighlight extends base {

src/SelectionScroll.js

 /**
- * Mixin which scrolls a container to keep the selected item visible.
- *
- * @mixin SelectionScroll
+ * @class SelectionScroll
+ * @classdesc Mixin which scrolls a container to keep the selected item visible
  */
 
+
 export default (base) => class SelectionScroll extends base {
@@ -8,0 +8,0 @@

src/SwipeDirection.js

 /**
- * Mixin which maps touch gestures (swipe left, swipe right) to direction
- * semantics (goRight, goLeft).
- *
- * @mixin SwipeDirection
+ * @class SwipeDirection
+ * @classdesc Mixin which maps touch gestures (swipe left, swipe right) to direction
+ * semantics (goRight, goLeft)
  */
 
+
 export default (base) => class SwipeDirection extends base {
@@ -9,0 +9,0 @@

src/TargetSelection.js

 /**
- * Mixin that allows a component to delegate its own selection semantics to a
- * target element. This is useful when defining components that act as
- * optional decorators for a component that acts like a list.
+ * @class TargetSelection
+ * @classdesc Mixin that allows a component to delegate its own selection
+ * semantics to a target element
  *
- * @mixin TargetSelection
+ * This is useful when defining components that act as optional decorators for a
+ * component that acts like a list.
  */
@@ -8,0 +9,0 @@

src/TemplateStamping.js

 /**
- * Mixin for template stamping. If a component defines a template property (as a
- * string or referencing a HTML template), when the component class is
- * instantiated, a shadow root will be created on the instance, and the contents
- * of the template will be cloned into the shadow root.
+ * @class TemplateStamping
+ * @classdesc Mixin for stamping a template into a Shadow DOM subtree upon
+ * component instantiation
  *
+ * If a component defines a template property (as a string or referencing a HTML
+ * template), when the component class is instantiated, a shadow root will be
+ * created on the instance, and the contents of the template will be cloned into
+ * the shadow root.
+ *
  * For the time being, this extension retains support for Shadow DOM v0.
  * That will eventually be deprecated as browsers implement Shadow DOM v1.
- *
- * @mixin TemplateStamping
  */
@@ -12,0 +14,0 @@

src/TimerSelection.js

 /**
- * Mixin provides for automatic timed changes in selection, as in a
- * automated slideshow.
- *
- * @mixin TimerSelection
+ * @class TimerSelection
+ * @classdesc Mixin provides for automatic timed changes in selection, as in a
+ * automated slideshow
  */
@@ -7,0 +6,0 @@

src/TrackpadDirection.js

 /**
- * Mixin which maps a horizontal trackpad swipe gestures (or horizontal mouse
- * wheel actions) to direction semantics.
+ * @class TrackpadDirection
+ * @classdesc Mixin which maps a horizontal trackpad swipe gestures (or
+ * horizontal mouse wheel actions) to direction semantics
  *
@@ -20,6 +21,5 @@ * To respond to the trackpad, we can listen to the DOM's "wheel" events. These
  * degree of trackpad responsiveness possible with native applications.
- *
- * @mixin TrackpadDirection
  */
 
+
 export default (base) => class TrackpadDirection extends base {
@@ -26,0 +26,0 @@

test/AttributeMarshalling.tests.js

 import { assert } from 'chai';
-import AttributeMarshalling from '../AttributeMarshalling.js';
+import AttributeMarshalling from '../src/AttributeMarshalling';
 
@@ -4,0 +4,0 @@

test/Composable.tests.js

 import { assert } from 'chai';
-import Composable from '../Composable.js';
+import Composable from '../src/Composable';
 
@@ -4,0 +4,0 @@

test/TemplateStamping.tests.js

 import { assert } from 'chai';
-import TemplateStamping from '../TemplateStamping.js';
+import TemplateStamping from '../src/TemplateStamping';
 
@@ -4,0 +4,0 @@

No alert changes

Improved metrics

Number of lines in readme file

533

increased by17666.67%

Worsened metrics

Total package byte prevSize

424954

decreased by-2.31%

Number of package files

40

decreased by-25.93%

Lines of code

6091

decreased by-18.79%

No dependency changes