titon-toolkit 1.2.2 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d413ce70c7079b44d459f834d3d637bcbea3d7bb
-  data.tar.gz: 2ea9a84f877320b46f7707aa0fcad89f1482d9ec
+  metadata.gz: ce926ac41da8fea1a16eae9bffb316a6db9885a5
+  data.tar.gz: bf26b72d2ad436c8e70752c5edfecc16a41a42e6
 SHA512:
-  metadata.gz: d4b81970cc8b02b1ec6ca2b9e306e648edaed42212ec18a7a9e8ea7ac94670efde6b53ea512d30ad536fa657a847e82cd8a9883fd27ba817b63613aee2f874d3
-  data.tar.gz: b31044ad955c73fbd1be7c5f92b960fec80669d37be74e8e30fb89c463b4d3e42c86fa8b04e04717f4a272f6d0aed9c5b2c0ee534f8da2f8f111d21cfab240f2
+  metadata.gz: 5c5e466f72c7eef9988112e0e9bf90076d85c7cc085cda545d18413bbcd13917c9b38115eac334d83717438e290d5ebb829585bb3bda5e05ca01db12a76858f9
+  data.tar.gz: 3ebbc0599d1d6bf3406e1f14c7811e7bfbb3c39cc30f389c37e0bd86121518cd090ba1535edbf26152cf9a52ea2ee9f76350f52506fc45e715d5fd5186cafc6d

data/changelog.md

@@ -2,132 +2,52 @@
 
 Older versions can be found in the documentation changelogs.
 
-## 1.2.2 ##
-* Added z-index variables to all applicable components for easier layering
-* Fixed a bug where data attribute selectors were not being delegated to the document [[#20](https://github.com/titon/toolkit/issues/20)]
-* Fixed a bug where tooltips would not show above modals [[#20](https://github.com/titon/toolkit/issues/20)]
-* Fixed a bug where the blackout could be closed while the modal is loading [[#16](https://github.com/titon/toolkit/issues/16)]
+## 1.3.0 ##
+This minor release includes 2 new components, automatic ARIA support for all applicable components,
+replacing Compass with autoprefixer, removal of state prefixing, and many more bug fixes and improvements.
 
-## 1.2.1 ##
-* Fixed a bug with `throttle()` when 0 is passed as the delay
-* Pin
-    * Moved `onScroll()` logic into a new `pin()` method
-    * Updated to use `height()` instead of `outerHeight()` to take into account parent padding
-    * Updated to trigger pinning on page load
-* Type Ahead
-    * Added `preventDefault()` when enter is pressed to stop form submissions
-    * Fixed incorrect `cycle` and `select` events being triggered
-
-## 1.2.0 ##
-This minor release includes thorough documentation for all components,
-a refactored event binding and management layer, a data attribute option inheritance layer,
-and an optimization and cleanup pass. Also bug fixes.
-
-* Added `join-classes()` function
-* Added `grunt production` command to compress for production purposes
-* Updated `grunt` command to not compress for development purposes
-* Renamed all `__*` methods to `on*`
-* Renamed `currentIndex` to `index` in all components
-* Removed `content-spacing()` mixin
-* Removed `previousIndex` properties
-* Removed `loadingMessage` and `errorMessage` options
-* Removed `.medium` class support
-* Removed automatic setting of `animation` and `className` CSS classes for embedded elements
-* Removed background and font colors from CSS to reduce CSS filesize
+* Added new Step component for step based navigation
+* Added new Switch component for visual checkbox switches
+* Added ARIA support to all components with supported documentation
+* Added CSS vendor prefixing support through [autoprefixer](https://github.com/ai/autoprefixer)
+* Added namespace event triggering support to the activating node
+* Removed is and has state prefixing from the CSS and JS layers
+* Removed `$state-is-prefix` and `$state-has-prefix` Sass variables
+* Removed individual JavaScript distribution files
+* Removed Compass dependency in favor of autoprefixer
+* Updated to normalize.css v3.0.1
+* jQuery
+    * Updated `$.fn.item()` to return an empty jQuery collection if index out of range
+    * Refactored the `clickout` event to support delegated elements
+    * Removed `$.hyphenate()`
+    * Removed event helper methods like `clickout()`, `swipeleft()`, etc
 * Toolkit
-    * Added `bound()` to bound a number
-    * Added `isRetina` flag
-    * Updated `positionTo()` to re-position if the element falls outside the viewport
+    * Added `aria` property to toggle support
+    * Added `aria()` collection method that can set ARIA attributes
+    * Removed `Toolkit.options.isPrefix` and `Toolkit.options.hasPrefix`
+    * Renamed `Toolkit.options.vendor` to `Toolkit.vendor`
+    * Renamed `Toolkit.createComponent()` to `Toolkit.create()`
 * Component
-    * Refactored that event management layer within all components
-    * Added `bindEvents()` to handle event attaching and detaching (paired with change above)
-        * Called automatically from `enable()` and `disable()`
-    * Added option inheritance from data attributes found on target elements and nodes
-        * Possible through new `inheritOptions()`
-    * Added option inheritance from parent component
-    * Added `readOption` to find an option via data attribute of option object
-    * Merged `setElement()` logic into `createElement()`
-    * Removed `setElement()`
-* Accordion
-    * Updated `show` event arguments to `[section, node, index]`
-* Base
-    * Added `.no-scroll`
-    * Removed `.inline`, `.inline-block`, `.static`, `.relative`, and `.absolute`
-* Blackout
-    * Added a `shown` argument to the `show` event
-    * Added `showLoader` and `hideLoader` events
-    * Renamed `loaderMessage` option to `loadingMessage`
-* Button
-    * Added outline none to `:focus` styles
-    * Fixed a bug with `input` buttons
-* Button Group
-    * Removed `!important` from negative margin properties
+    * Added global `cache` option to toggle AJAX response caching
+    * Added static `count` property to each component that tracks the number of instances in the page
+    * Added `uid` property that represents the current instance count
+    * Added `cssClass` property that represents the component name in CSS class form
+    * Added `id()` method to generate unique CSS class names
+    * Removed error and loading template generation from components (wasn't being used)
+* Carousel
+    * Fixed a bug where `swipedown` would not trigger
+    * Merged `itemsElement` and `itemElement` options
+    * Merged `tabsElement` and `tabElement` options
+    * Removed `itemsWrapper`, `itemsList`, `tabsWrapper` properties
 * Drop
-    * Added support for drops built with `ol`
-    * Updated `show` and `hide` event arguments to `[element, node]`
-* Flyout
-    * Fixed a bug where data items were being mapped with no URL
-    * Removed `load` event from `show()` as it was being used incorrectly
-* Form
-    * Renamed `.is-legendless` to `.no-legend`
-    * Cleaned up some basic styles
+    * Added a global `.drop` class that all menus require
 * Grid
-    * Changed `$grid-columns-medium` to 12
-    * Added `$grid-push-pull` to toggle push and pull classes in output
-* Icon
-    * Removed `.icon--rotate`
-* Input
-    * Updated build methods to be private
-    * Fixed an issue where select event names were incorrect
-* Input Group
-    * Added small and large size support
-* Lazy Load
-    * Instantiation will need to be set on a container instead of the items being loaded
-    * Added `data-src-retina` support
-    * Added support for lazy loading within an overflown element
-    * Fixed a bug where hidden images were being loaded
-    * Renamed `data-lazyload` to `data-src`
-* Loader
-    * Renamed `.spinner` to `.loader-spinner`
-* Matrix
-    * Replaced `.matrix-item` with `li`
-    * Removed `selector` option
-    * Removed inline `img` styles, use `.fluid` instead
+    * Added `%row` placeholder to extend row styles from
+    * Added `%col` placeholder to extend column styles from
+    * Removed `.row` (reserved now for another component)
 * Modal
-    * Added `$modal-animation` to filter the animations in the CSS output
-    * Updated `.modal-close` to use a `button`
-    * Updated `ajax` and `getContent` options to be inheritable at runtime through the activating node
-    * Refactored markup and CSS to support large height modals
-    * Removed `flip` and `flip-vert` animations
-    * Removed dragging (temporarily)
+    * Fixed a bug where a modal opened on the same modal causes the blackout to persist
 * Pin
-    * Fixed a bug where `.is-pinned` was not being removed
-* Popover & Tooltip
-    * Added `$popover-tooltip-animation` to filter the animations in the CSS output
-    * Added `$popover-arrow-width` and `$tooltip-arrow-width` to alter the arrow sizes
-    * Added automatic compatibility of `title` attributes
-    * Fixed a bug where node was being set and used incorrectly
-    * Fixed a bug with mouseleave events
-    * Options `className` and `position` are added and removed dynamically each reveal
-    * Updated options to be inheritable at runtime through the activating node
-    * Updated `position` values to be dashed instead of camel case
-    * Removed `slide-in` animation
-* Progress
-    * Added multiple progress bar support
-    * Removed `.medium` size
-    * Refactored state classes
-* Responsive
-    * Added `.fluid` class for images, audio, canvas, etc
-* Showcase
-    * Updated options to be inheritable at runtime through the activating node
-    * Replaced `a` with `button`
-* Stalker
-    * Added nested marker support
-    * Added `targetBy` and `markBy` options
-    * Removed `marker` and `target` properties
-* Table
-    * Moved zebra-striping into an `.is-striped` class
-* Tabs
-    * Renamed `sectionsElement` option to `sectionElement`
-* Type Ahead
-    * Renamed `process()` to `source()`
+    * Added `lock` option to disable pinning if element is taller than the viewport
+    * Added `$pin-transition` variable
+    * Fixed a bug where the pin element margin was not included in the total height

data/readme.md

@@ -6,7 +6,7 @@
                           \/_/  \/_____/\/_____/\/_____/\/_/\/_/ \/_/  \/_/
 ```
 
-# Toolkit v1.2.2 #
+# Toolkit v1.3.0 #
 
 Titon Toolkit is a collection of very powerful user interface components and utility classes
 for the responsive, mobile, and modern web. Each component represents encapsulated HTML, CSS,

data/roadmap.md

@@ -2,19 +2,17 @@
 
 All releases will contain bug fixing and polishing for current features.
 
-### 1.3.0 ###
+### 1.4.0 ###
+* Off Canvas - A component for displaying side menus off the canvas (viewport). Useful for sliding mobile navigations.
 * Marquee - A component that displays multiple slides at once and allows for cycling through a variable amount. A sister component to the carousel.
-* Step - A component that highlights a step in a series of consecutive steps (represented by an arrow based navigation).
-* Dialog - A component that prompts the user for an action. Sister to the modal component.
-* Remove is and has state prefixing.
+* Divider - A component for dividing content horizontally or vertically.
 * Add destroy method to clean up and remove the component.
-* Add aria attributes where applicable.
-* Add deferred/promise integration.
 
-### 1.4.0 ###
+### 1.5.0 ###
+* Dialog - A component that prompts the user for an action. Sister to the modal component.
 * Toast - A component to display toast notifications.
 * Guide - A component that displays introduction guides (popovers) in a sequential order. Useful for show casing new features and functionality.
-* Divider - A component for dividing content horizontally or vertically.
+* Add deferred/promise integration.
 
 ### 2.0.0 ###
 * Remove the MooTools port.
@@ -24,6 +22,7 @@ All releases will contain bug fixing and polishing for current features.
 * Switch to Gulp.
 * Updated to Sass 3.
 * Refactor events for before/after conditions.
+* RTL support.
 
 ### 3.0.0 ###
 * Remove jQuery dependency and go straight vanilla?

data/scss/normalize.scss

@@ -1,11 +1,32 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
 
-/* ==========================================================================
-   HTML5 display definitions
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ *    user zoom.
+ */
+
+html {
+    font-family: sans-serif; /* 1 */
+    -ms-text-size-adjust: 100%; /* 2 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+    margin: 0;
+}
+
+/* HTML5 display definitions
    ========================================================================== */
 
 /**
- * Correct `block` display not defined in IE 8/9.
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
  */
 
 article,
@@ -24,13 +45,16 @@ summary {
 }
 
 /**
- * Correct `inline-block` display not defined in IE 8/9.
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
  */
 
 audio,
 canvas,
+progress,
 video {
-    display: inline-block;
+    display: inline-block; /* 1 */
+    vertical-align: baseline; /* 2 */
 }
 
 /**
@@ -44,8 +68,8 @@ audio:not([controls]) {
 }
 
 /**
- * Address `[hidden]` styling not present in IE 8/9.
- * Hide the `template` element in IE, Safari, and Firefox < 22.
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
  */
 
 [hidden],
@@ -53,32 +77,7 @@ template {
     display: none;
 }
 
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-    font-family: sans-serif; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Links
+/* Links
    ========================================================================== */
 
 /**
@@ -89,14 +88,6 @@ a {
     background: transparent;
 }
 
-/**
- * Address `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
 /**
  * Improve readability when focused and also mouse hovered in all browsers.
  */
@@ -106,22 +97,11 @@ a:hover {
     outline: 0;
 }
 
-/* ==========================================================================
-   Typography
+/* Text-level semantics
    ========================================================================== */
 
 /**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
- */
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
  */
 
 abbr[title] {
@@ -129,7 +109,7 @@ abbr[title] {
 }
 
 /**
- * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
  */
 
 b,
@@ -138,7 +118,7 @@ strong {
 }
 
 /**
- * Address styling not present in Safari 5 and Chrome.
+ * Address styling not present in Safari and Chrome.
  */
 
 dfn {
@@ -146,13 +126,13 @@ dfn {
 }
 
 /**
- * Address differences between Firefox and other browsers.
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
  */
 
-hr {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    height: 0;
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
 }
 
 /**
@@ -164,34 +144,6 @@ mark {
     color: #000;
 }
 
-/**
- * Correct font family set oddly in Safari 5 and Chrome.
- */
-
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    font-size: 1em;
-}
-
-/**
- * Improve readability of pre-formatted text in all browsers.
- */
-
-pre {
-    white-space: pre-wrap;
-}
-
-/**
- * Set consistent quote types.
- */
-
-q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
-}
-
 /**
  * Address inconsistent and variable font size in all browsers.
  */
@@ -220,12 +172,11 @@ sub {
     bottom: -0.25em;
 }
 
-/* ==========================================================================
-   Embedded content
+/* Embedded content
    ========================================================================== */
 
 /**
- * Remove border when inside `a` element in IE 8/9.
+ * Remove border when inside `a` element in IE 8/9/10.
  */
 
 img {
@@ -233,79 +184,92 @@ img {
 }
 
 /**
- * Correct overflow displayed oddly in IE 9.
+ * Correct overflow not hidden in IE 9/10/11.
  */
 
 svg:not(:root) {
     overflow: hidden;
 }
 
-/* ==========================================================================
-   Figures
+/* Grouping content
    ========================================================================== */
 
 /**
- * Address margin not present in IE 8/9 and Safari 5.
+ * Address margin not present in IE 8/9 and Safari.
  */
 
 figure {
-    margin: 0;
+    margin: 1em 40px;
 }
 
-/* ==========================================================================
-   Forms
-   ========================================================================== */
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
 
 /**
- * Define consistent border, margin, and padding.
+ * Contain overflow in all browsers.
  */
 
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
+pre {
+    overflow: auto;
 }
 
 /**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ * Address odd `em`-unit font size rendering in all browsers.
  */
 
-legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
 }
 
+/* Forms
+   ========================================================================== */
+
 /**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
  */
 
 button,
 input,
+optgroup,
 select,
 textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
+    color: inherit; /* 1 */
+    font: inherit; /* 2 */
     margin: 0; /* 3 */
 }
 
 /**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
  */
 
-button,
-input {
-    line-height: normal;
+button {
+    overflow: visible;
 }
 
 /**
  * Address inconsistent `text-transform` inheritance for `button` and `select`.
  * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
  */
 
 button,
@@ -339,6 +303,28 @@ html input[disabled] {
 }
 
 /**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+    line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
  * 1. Address box sizing set to `content-box` in IE 8/9/10.
  * 2. Remove excess padding in IE 8/9/10.
  */
@@ -350,8 +336,19 @@ input[type="radio"] {
 }
 
 /**
- * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
  *    (include `-moz` to future-proof).
  */
 
@@ -363,8 +360,9 @@ input[type="search"] {
 }
 
 /**
- * Remove inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
  */
 
 input[type="search"]::-webkit-search-cancel-button,
@@ -373,27 +371,43 @@ input[type="search"]::-webkit-search-decoration {
 }
 
 /**
- * Remove inner padding and border in Firefox 4+.
+ * Define consistent border, margin, and padding.
  */
 
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
 }
 
 /**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+    border: 0; /* 1 */
+    padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
  */
 
 textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
+    overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+    font-weight: bold;
 }
 
-/* ==========================================================================
-   Tables
+/* Tables
    ========================================================================== */
 
 /**
@@ -404,3 +418,8 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
 }
+
+td,
+th {
+    padding: 0;
+}