Merge branch 'beta-v6.3.0'

class/Xmeter.class.js

@@ -1,5 +1,8 @@
-const HTMLElement = require('extrajs-dom').HTMLElement
+const path = require('path')
+
 const View = require('extrajs-view')
+const xjs = require('extrajs-dom')
+const ARIAPatterns = require('aria-patterns')
 
 /**
  * Static members for the Xmeter package.
@@ -11,6 +14,7 @@ class Xmeter {
   /**
    * @summary Render any data in HTML.
    * @see Xmeter.VIEW
+   * @deprecated Will be removed in Version 7.
    * @param   {*} data any data to render
    * @returns {View}
    */
@@ -20,6 +24,7 @@ class Xmeter {
      * @description Available displays:
      * - `Xmeter.view(data).permalink()` - display a permalink
      * @namespace Xmeter.VIEW
+     * @deprecated Will be removed in Version 7.
      * @type {View}
      */
     return new View(null, data)
@@ -28,16 +33,18 @@ class Xmeter {
        * Parameter `data` should be of type `{id:string}` (an object with a string `id` property).
        * @summary Call `Xmeter.view(data).permalink()` to render this display.
        * @function Xmeter.VIEW.permalink
-       * @version STABLE
+       * @version DEPRECATED
+       * @deprecated YES. Moved to {@link https://github.com/chharvey/aria-patterns}
        * @param   {string=} content the text of the link
        * @param   {string=} label the value for `[aria-label]` attribute
        * @returns {string} HTML output
        */
       .addDisplay(function permalink(content = '§', label = 'permalink') {
-        return new HTMLElement('a').class('c-Permalink h-Inline h-Hidden')
-          .attr({ href: `#${this.id}`, 'aria-label': label })
-          .addContent(content)
-          .html()
+        return new xjs.DocumentFragment(ARIAPatterns.xPermalink.render({
+          id: this.id,
+          label: label,
+          text: content,
+        })).innerHTML()
       })
   }
 }

css/src/_base.less

@@ -65,14 +65,20 @@ form, fieldset, textarea,
 details {
   margin-bottom: var(--lh);
   margin-bottom: 1lh;
+  @supports (margin-block-end: var(--variable)) {
+    margin-bottom: unset;
   margin-block-end: var(--lh);
   margin-block-end: 1lh;
+  }
 }
 h1 {
   padding-top: var(--lh);
   padding-top: 1lh;
+  @supports (padding-block-start: var(--variable)) {
+    padding-top: unset;
   padding-block-start: var(--lh);
   padding-block-start: 1lh;
+  }
 }
 
 // Font sizes for text-level elements should be in units of `em` instead of `rem` because
@@ -205,7 +211,10 @@ hr {
     dt > &,
     dd > & {
       padding-left: 2rem; // HACK fallback for logical
+      @supports (padding-inline-start: 1rem) {
+        padding-left: unset;
       padding-inline-start: 2rem;
+      }
     }
   }
   ol {
@@ -487,4 +496,12 @@ img {
 summary {
   cursor: pointer;
 }
+
+dialog {
+  padding: calc(0.5 ~'*' var(--lh)) 1rem; // COMBAK-FALLBACK
+  padding: 0.5lh 1rem;
+  &::backdrop {
+    background-color: @p-color-gray;
+  }
+}
 //++++ end # INTERACTIVE ++++//

css/src/_c-Permalink.less

@@ -1,3 +1,8 @@
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
+///////--- CHANGED DEPRECATED! Use `require('aria-patterns')` instead! ---////////
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
 
 /*################################*\
     xmeter  |  _c-Permalink.less
@@ -6,6 +11,8 @@
 
 // The Permalink
 //
+// **CHANGED. DEPRECATED. This component has been moved to https://github.com/chharvey/aria-patterns.**
+//
 // The Permalink Component is added to the end of a heading in a documentation system,
 // style guide, or pattern library. This Component is an internal link, and makes sections
 // within a document easy to access.

css/src/_h-Constrain.less

@@ -0,0 +1,47 @@
+
+/*################################*\
+    xmeter  |  _h-Constrain.less
+\*################################*/
+
+
+// Constrain
+//
+// The Constrain Helper limits an element’s maximum inline-size
+// (width, in horizontal writing modes), ensuring body content does not expand infinitely.
+// It is very similar to the `.h-Measure` Helper, but it is meant for large containers,
+// not for individual elements of prose (such as a paragraph or list).
+// <header><dl>
+//   <dt>author</dt>  <dd>Chris Harvey</dd>
+//   <dt>updated</dt> <dd><time>2018-01-31</time></dd>
+// </dl></header>
+//
+// Markup:
+// <div class="h-Constrain">
+//   <h1>content heading</h1>
+//   <p>This object is constrained to a maximum width. Expand
+//     your browser window (or zoom out) to see the effect.</p>
+// </div>
+//
+// Weight: 5.1
+//
+// Styleguide Helpers.Constrain
+.h-Constrain {
+  max-width: 90em; // HACK fallback for logical prop
+  @supports (max-inline-size: 1em) {
+    max-width: unset;
+    max-inline-size: 90em;
+  }
+  margin-left: auto; margin-right: auto; // HACK fallback for logical prop
+  margin-inline: auto;
+}
+
+@media screen  and (min-width: 30em) { .h-Constrain-sK { .h-Constrain; } }
+@media screen  and (min-width: 45em) { .h-Constrain-sM { .h-Constrain; } }
+@media screen  and (min-width: 60em) { .h-Constrain-sG { .h-Constrain; } }
+@media screen  and (min-width: 75em) { .h-Constrain-sT { .h-Constrain; } }
+@media screen  and (min-width: 90em) { .h-Constrain-sP { .h-Constrain; } }
+@media not all and (min-width: 30em) { .h-Constrain-nK { .h-Constrain; } }
+@media not all and (min-width: 45em) { .h-Constrain-nM { .h-Constrain; } }
+@media not all and (min-width: 60em) { .h-Constrain-nG { .h-Constrain; } }
+@media not all and (min-width: 75em) { .h-Constrain-nT { .h-Constrain; } }
+@media not all and (min-width: 90em) { .h-Constrain-nP { .h-Constrain; } }

css/src/_h-Hidden.less

@@ -1,3 +1,8 @@
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
+///////--- CHANGED DEPRECATED! Use `require('aria-patterns')` instead! ---////////
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
 
 /*################################*\
     xmeter  |  _h-Hidden.less
@@ -6,6 +11,8 @@
 
 // Hidden
 //
+// **CHANGED. DEPRECATED. This helper has been moved to https://github.com/chharvey/aria-patterns.**
+//
 // The Hidden Helper visually hides an element while keeping it accessible
 // to non-visual media such as screen readers.
 // A <b>skip link</b> is a common example.

css/src/_hack.ie.less

@@ -85,6 +85,7 @@
     .o-List {
       padding-left: 0;
     }
+    // CHANGED-DEPRECATED
     .o-Tablist {
       margin-top: 0;
       margin-left: 0;
@@ -94,6 +95,7 @@
         margin-bottom: 0;
       }
     }
+    // CHANGED-DEPRECATED
     .c-Permalink {
       h1:hover > &,
       h2:hover > &,

css/src/_o-Tablist.less

@@ -1,3 +1,8 @@
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
+///////--- CHANGED DEPRECATED! Use `require('aria-patterns')` instead! ---////////
+////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////
 
 /*################################*\
     xmeter  |  _o-Tablist.less
@@ -6,6 +11,10 @@
 
 // The Tablist Object
 //
+// **WARNING: CHANGED: This object is DEPRECATED.
+// This object will be removed in Version 7.**
+// It will be replaced by the Tablist Object in https://github.com/chharvey/aria-patterns.
+//
 // The Tablist Object contains a series of corresponding tabs and panels.
 // It is similar to a carousel, but only one panel is shown at a time and
 // there is no timed automatic progression.

css/src/xmeter.less

@@ -1,7 +1,7 @@
 
 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\
     xmeter
-    Version: 6.2.0
+    Version: 6.3.0-alpha.2
     Licence: MIT
     Repo   : https://github.com/chharvey/xmeter.git
     Home   : https://github.com/chharvey/xmeter#readme
@@ -46,6 +46,7 @@
  * Clearfix............................creates a line break and clears floats
  * Hidden..............................visually hides an element
  * Measure.............................constrains an element’s inline-size for readability
+ * Constrain...........................constrains a container’s inline-size for readability
  * Ruled...............................adds background lines
  *
  * ATOMS-------------------------------FUNCTIONAL CSS
@@ -88,7 +89,7 @@
 @import url('_o-List.less');
 @import url('_o-Flex.less');
 @import url('_o-Grid.less');
-@import url('_o-Tablist.less');
+@import url('_o-Tablist.less'); // CHANGED DEPRECATED
 
 // Components
 //
@@ -102,15 +103,15 @@
 //
 // Styleguide Components
 
-@import url('_c-Permalink.less');
+@import url('_c-Permalink.less'); // CHANGED DEPRECATED
 
-// Organisms
+// Interfaces
 //
-// Aggregate compositions of Objects and Components that form single, self-sustaining interfaces.
+// Aggregate compositions of Objects and Components that form single, self-sustaining organisms.
 //
 // Weight: 4
 //
-// Styleguide Organisms
+// Styleguide Interfaces
 
 // Helpers
 //
@@ -123,8 +124,9 @@
 @import url('_h-Block.less');
 @import url('_h-Inline.less');
 @import url('_h-Clearfix.less');
-@import url('_h-Hidden.less');
+@import url('_h-Hidden.less'); // CHANGED DEPRECATED
 @import url('_h-Measure.less');
+@import url('_h-Constrain.less');
 @import url('_h-Ruled.less');
 
 // Atoms

docs/_docs.tpl.jade

@@ -1,5 +1,5 @@
 doctype html
-html(lang="en")
+html(lang="en")#top
   mixin doctoc(args, inner)
     //- NOTE parameter validation
     -
@@ -21,10 +21,11 @@ html(lang="en")
     meta(name="description" content=Docs.DOCS.description())
     meta(name="viewport" content="width=device-width, initial-scale=1")
     block styles
-      //- link(rel="stylesheet" href="https://cdn.rawgit.com/chharvey/bangs/v0.9.0/bangs.min.css")
+      link(rel="stylesheet" href="https://cdn.rawgit.com/chharvey/bangs/v0.15.0/bangs.css")
       link(rel="stylesheet" href="../css/xmeter.css")
       link(rel="stylesheet" href="css/docs.css")
-  body.h-Ruled#top
+    block scripts
+  body.h-Ruled.docs-body
     a.h-Hidden(href="#main") skip to main content
     header
       h1= Docs.DOCS.name()

docs/_includes/_base.pug

@@ -1,6 +1,6 @@
 - classname = classname || {}
 mixin permalink(id)
-  != Xmeter.view({ id: id }).permalink()
+  != Xmeter.view({ id: id }).permalink('§')
 section#grouping-elements
   block groupingElements
     h2 Grouping Elements #[+permalink('grouping-elements')]
@@ -338,3 +338,10 @@ section#interactive-elements
       details
         summary Integer at lacus et diam tristique #[code(class=classname.code) details summary] suscipit.
         | Aenean consectetur #[code(class=classname.code) details] suscipit urna, non vehicula lacus blandit et.
+    figure(class=classname.figure)
+      dialog
+        h1.-pt-0 A Dialog
+        | text for #[code(class=classname.code) dialog] element
+        p Can include flow content.
+        p.-mb-0: button(type="button" name="dialog-close") close dialog
+      button(type="button" name="dialog-open") open dialog