Use consistent namespace for iife bundles

README.md

@@ -27,7 +27,7 @@ If you'd like to use Vrembem for prototyping or just want to take it for a test
 
 ```html
 <!-- Include Vrembem styles -->
-<link rel="stylesheet" href="https://unpkg.com/vrembem@latest/dist/styles.min.css">
+<link rel="stylesheet" href="https://unpkg.com/vrembem/dist/styles.min.css">
 
 <!-- Render a component -->
 <button class="link" data-modal-open="modal-id">Open modal</button>
@@ -41,17 +41,37 @@ If you'd like to use Vrembem for prototyping or just want to take it for a test
 </div>
 
 <!-- Include Vrembem JavaScript -->
-<script src="https://unpkg.com/vrembem@latest/dist/scripts.min.js"></script>
+<script src="https://unpkg.com/vrembem/dist/scripts.min.js"></script>
 
 <!-- Instantiate the component rendered in the document -->
 <script>
-  const modal = new vrembem.Modal();
+  const modal = vrembem.Modal();
   modal.init();
 </script>
 ```
 
 Also see [`example.html`](./example.html) for a more comprehensive working demo of using Vrembem via CDN.
 
+**CDN References**
+
+```html
+<!-- Vrembem styles (expanded or compressed) -->
+<link rel="stylesheet" href="https://unpkg.com/vrembem/dist/styles.css">
+<link rel="stylesheet" href="https://unpkg.com/vrembem/dist/styles.min.css">
+
+<!-- Vrembem scripts (expanded or compressed) -->
+<script src="https://unpkg.com/vrembem/dist/scripts.js"></script>
+<script src="https://unpkg.com/vrembem/dist/scripts.min.js"></script>
+
+<!-- Component specific styles (expanded or compressed) -->
+<link rel="stylesheet" href="https://unpkg.com/@vrembem/drawer/dist/styles.css">
+<link rel="stylesheet" href="https://unpkg.com/@vrembem/drawer/dist/styles.min.css">
+
+<!-- Component specific scripts (expanded or compressed) -->
+<script src="https://unpkg.com/@vrembem/drawer/dist/scripts.js"></script>
+<script src="https://unpkg.com/@vrembem/drawer/dist/scripts.min.js"></script>
+```
+
 ### Using NPM
 
 To use a Vrembem component, you'll first need to install it as a dependency. For this example we'll be using the modal component:
@@ -93,21 +113,21 @@ Include the component's markup into your project. Use the [online docs](https://
 
 #### JavaScript
 
-Some packages also have included scripts for their functionality. You can include these in your JavaScript files by importing, instantiate and initialize:
+Some packages also have included modules for their functionality. You can include these in your JavaScript files by importing, instantiate and initialize:
 
 ```js
 // Import your component
-import { Modal } from "@vrembem/modal"
+import Modal from "@vrembem/modal";
 
 // Instantiate and initialize
-const modal = new Modal()
-modal.init()
+const modal = Modal();
+modal.init();
 ```
 
-Alternatively, you can use the `autoInit` option to auto initialize and optionally omit saving the instance to a variable if it won't be used later.
+Alternatively, you can use the `autoInit` option to auto initialize and optionally omit saving the instance to a variable if the returned API won't be needed later.
 
 ```js
-new Modal({ autoInit: true })
+Modal({ autoInit: true });
 ```
 
 #### All-in-one
@@ -129,13 +149,15 @@ Via your project's JavaScript manifest file:
 ```js
 // Import all under the vb namespace
 import * as vb from "vrembem";
-const drawer = new vb.Drawer({ autoInit: true });
+const drawer = vb.Drawer({ autoInit: true });
 
 // Or import individual components
 import { Drawer } from "vrembem";
-const drawer = new Drawer({ autoInit: true });
+const drawer = Drawer({ autoInit: true });
 ```
 
+> Note that `core` helpers do not need to be initialized since they're just a set of helpful utility functions.
+
 ## Copyright and License
 
 Vrembem and Vrembem documentation copyright (c) 2020 Sebastian Nitu. Vrembem is released under the [MIT license](https://github.com/sebnitu/vrembem/blob/master/LICENSE) and Vrembem documentation is released under [Creative Commons](https://github.com/sebnitu/vrembem/blob/master/docs/LICENSE).

example.html

@@ -16,7 +16,7 @@ <h1 class="h3">Vrembem</h1>
     </div>
     <hr class="sep margin-vert-lg">
     <div class="spacing">
-      <p>Example Menu Component</p>
+      <p class="text-bold">Example Menu Component</p>
       <ul class="menu menu_stack_sm">
         <li class="menu__item">
           <a href="https://vrembem.com" class="menu__link">Documentation</a>
@@ -31,9 +31,11 @@ <h1 class="h3">Vrembem</h1>
     </div>
     <hr class="sep margin-vert-lg">
     <div class="spacing">
-      <p>Example Modal Component</p>
+      <p class="text-bold">Example Modal Component</p>
       <p>
-        <a href="#" class="link" data-modal-open="modal-default">Open modal</a>
+        <button class="link" data-modal-open="modal-default">
+          Open modal
+        </button>
       </p>
     </div>
   </div>
@@ -53,7 +55,7 @@ <h1 class="h3">Vrembem</h1>
 
 <!-- Instantiate the component rendered in the document -->
 <script>
-  const modal = new vrembem.Modal();
+  const modal = vrembem.Modal();
   modal.init();
 </script>
 

packages/checkbox/dist/scripts.js

@@ -1,5 +1,5 @@
 this.vrembem = this.vrembem || {};
-this.vrembem.checkbox = (function () {
+this.vrembem.Checkbox = (function () {
   'use strict';
 
   function _defineProperty(obj, key, value) {

packages/checkbox/rollup.config.js

@@ -4,7 +4,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 
 const entry = './index.js';
-const name = 'vrembem.checkbox';
+const name = 'vrembem.Checkbox';
 const babelConfig = {
   babelHelpers: 'runtime',
   rootMode: 'upward'

packages/dismissible/dist/scripts.js

@@ -1,5 +1,5 @@
 this.vrembem = this.vrembem || {};
-this.vrembem.dismissible = (function () {
+this.vrembem.Dismissible = (function () {
   'use strict';
 
   function _defineProperty(obj, key, value) {

packages/dismissible/rollup.config.js

@@ -4,7 +4,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 
 const entry = './index.js';
-const name = 'vrembem.dismissible';
+const name = 'vrembem.Dismissible';
 const babelConfig = {
   babelHelpers: 'runtime',
   rootMode: 'upward'

packages/drawer/dist/scripts.js

@@ -1,5 +1,5 @@
 this.vrembem = this.vrembem || {};
-this.vrembem.drawer = (function () {
+this.vrembem.Drawer = (function () {
 	'use strict';
 
 	function createCommonjsModule(fn, basedir, module) {

packages/drawer/rollup.config.js

@@ -4,7 +4,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import { terser } from 'rollup-plugin-terser';
 
 const entry = './index.js';
-const name = 'vrembem.drawer';
+const name = 'vrembem.Drawer';
 const babelConfig = {
   babelHelpers: 'runtime',
   rootMode: 'upward'

packages/modal/dist/scripts.js

@@ -1,5 +1,5 @@
 this.vrembem = this.vrembem || {};
-this.vrembem.modal = (function () {
+this.vrembem.Modal = (function () {
 	'use strict';
 
 	function createCommonjsModule(fn, basedir, module) {