@carbon/charts 0.28.0 → 0.29.2

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav-fixed.hbs

@@ -0,0 +1,95 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<aside class="{{@root.prefix}}--side-nav {{@root.prefix}}--side-nav--fixed" data-side-nav>
+  <nav class="{{@root.prefix}}--side-nav__navigation" role="navigation" aria-label="Side navigation">
+    <ul class="{{@root.prefix}}--side-nav__items">
+      <li class="{{@root.prefix}}--side-nav__item">
+        <button class="{{@root.prefix}}--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="false">
+          <span class="{{@root.prefix}}--side-nav__submenu-title">
+            L0 Menu
+          </span>
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
+            </svg>
+          </div>
+        </button>
+        <ul class="{{@root.prefix}}--side-nav__menu" role="menu" hidden="">
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="menuitem">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item">
+        <button class=" {{@root.prefix}}--side-nav__submenu" role="button" aria-haspopup="true" aria-expanded="true">
+          <span class="{{@root.prefix}}--side-nav__submenu-title">
+            Category title that is really long and probably should overflow
+          </span>
+          <div
+            class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
+            </svg>
+          </div>
+        </button>
+        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">
+                L0 menu item
+              </span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+              <span class="{{@root.prefix}}--side-nav__link-text">
+                L0 menu item
+              </span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">L0 menu item</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item">
+        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
+          <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
+        </a>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
+        <a class="{{@root.prefix}}--side-nav__link {{@root.prefix}}--side-nav__link--current" href="javascript:void(0)"
+          aria-current="page">
+          <span class="{{@root.prefix}}--side-nav__link-text">
+            Link with really long text that should wrap - active
+          </span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</aside>

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav-footer.hbs

@@ -0,0 +1,28 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<footer class="{{@root.prefix}}--side-nav__footer">
+  <button class="{{@root.prefix}}--side-nav__toggle" role="button" title="Close the side navigation menu">
+    <div class="{{@root.prefix}}--side-nav__icon">
+      {{carbon-icon 'Close20'
+      class=(add
+      (add @root.prefix '--side-nav__icon--collapse')
+      (add ' ' (add @root.prefix '--side-nav-collapse-icon'))
+      )
+      aria-hidden="true"}}
+      {{carbon-icon 'ChevronRight20'
+      class=(add
+      (add @root.prefix '--side-nav__icon--expand')
+      (add ' ' (add @root.prefix '--side-nav-expand-icon'))
+      )
+      aria-hidden="true"}}
+    </div>
+    <span class="{{@root.prefix}}--assistive-text">
+      Toggle the expansion state of the navigation
+    </span>
+  </button>
+</footer>

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav-header.hbs

@@ -0,0 +1,64 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+{{#if sidenav.title}}
+<header class="{{@root.prefix}}--side-nav__header">
+  <div class="{{@root.prefix}}--side-nav__icon">
+    <svg
+      width="20"
+      height="20"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      aria-hidden="true">
+      <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+    </svg>
+  </div>
+  <div class="{{@root.prefix}}--side-nav__details">
+    <h2
+      class="{{@root.prefix}}--side-nav__title"
+      title="{{ sidenav.title.text }}">
+      {{ sidenav.title.text }}
+    </h2>
+    <div class="{{@root.prefix}}--side-nav__switcher">
+      <label for="side-nav-switcher" class="{{@root.prefix}}--assistive-text">
+        Switcher
+      </label>
+      <select id="carbon-side-nav-switcher" class="{{@root.prefix}}--side-nav__select">
+        <option
+          class="{{@root.prefix}}--side-nav__option"
+          disabled=""
+          hidden=""
+          value=""
+          selected=""
+        >
+          Switcher
+        </option>
+        <option class="{{@root.prefix}}--side-nav__option" value="Option 1">
+          Option 1
+        </option>
+        <option class="{{@root.prefix}}--side-nav__option" value="Option 2">
+          Option 2
+        </option>
+        <option class="{{@root.prefix}}--side-nav__option" value="Option 3">
+          Option 3
+        </option>
+      </select>
+      <div class="{{@root.prefix}}--side-nav__switcher-chevron">
+        <svg
+          aria-hidden="true"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 32 32"
+        >
+          <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
+        </svg>
+      </div>
+    </div>
+  </div>
+</header>
+{{/if}}

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav.hbs

@@ -0,0 +1,103 @@
+<!--
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+<aside class="{{@root.prefix}}--side-nav" data-side-nav>
+  <nav class="{{@root.prefix}}--side-nav__navigation" role="navigation" aria-label="Side navigation">
+    {{> side-nav-header sidenav=sidenav }}
+    <ul class="{{@root.prefix}}--side-nav__items">
+      <li class="{{@root.prefix}}--side-nav__item">
+        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
+          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
+        </a>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
+        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" aria-current="page">
+          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--side-nav__link-text">Link - active</span>
+        </a>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item">
+        <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)">
+          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--side-nav__link-text">
+            Link with really long text that should wrap
+          </span>
+        </a>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
+        <a class="{{@root.prefix}}--side-nav__link {{@root.prefix}}--side-nav__link--current" href="javascript:void(0)"
+          aria-current="page">
+          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--side-nav__link-text">
+            Link with really long text that should wrap - active
+          </span>
+        </a>
+      </li>
+      <li class="{{@root.prefix}}--side-nav__item {{@root.prefix}}--side-nav__item--active">
+        <button class="{{@root.prefix}}--side-nav__submenu" type="button" aria-haspopup="true" aria-expanded="true">
+          <div class="{{@root.prefix}}--side-nav__icon">
+            <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 .35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 .35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
+            </svg>
+          </div>
+          <span class="{{@root.prefix}}--side-nav__submenu-title">
+            Category title that is really long and probably should overflow
+          </span>
+          <div class="{{@root.prefix}}--side-nav__icon {{@root.prefix}}--side-nav__icon--small {{@root.prefix}}--side-nav__submenu-chevron">
+            <svg aria-hidden="true" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+              <path d="M16 22L6 12l1.414-1.414L16 19.172l8.586-8.586L26 12 16 22z" />
+            </svg>
+          </div>
+        </button>
+        <ul class="{{@root.prefix}}--side-nav__menu" role="menu">
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">
+                Link with really long text that probably should be truncated
+              </span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+              <span class="{{@root.prefix}}--side-nav__link-text">
+                Link with really long text that probably should be truncated
+              </span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem">
+              <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
+            </a>
+          </li>
+          <li class="{{@root.prefix}}--side-nav__menu-item" role="none">
+            <a class="{{@root.prefix}}--side-nav__link" href="javascript:void(0)" role="menuitem" aria-current="page">
+              <span class="{{@root.prefix}}--side-nav__link-text">Link</span>
+            </a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    {{> side-nav-footer expanded=sidenav.state.expanded }}
+  </nav>
+</aside>

package/styles/vendor/carbon-components/src/components/ui-shell/side-nav.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import mixin from '../../globals/js/misc/mixin';
+import createComponent from '../../globals/js/mixins/create-component';
+import settings from '../../globals/js/settings';
+import initComponentBySearch from '../../globals/js/mixins/init-component-by-search';
+import handles from '../../globals/js/mixins/handles';
+import on from '../../globals/js/misc/on';
+import eventMatches from '../../globals/js/misc/event-matches';
+
+const { prefix } = settings;
+
+export default class SideNav extends mixin(
+  createComponent,
+  initComponentBySearch,
+  handles
+) {
+  /**
+   * The map associating DOM element and copy button UI instance.
+   * @member SideNav.components
+   * @type {WeakMap}
+   */
+  static components /* #__PURE_CLASS_PROPERTY__ */ = new WeakMap();
+
+  constructor(element, options) {
+    super(element, options);
+    this.manage(on(element, 'click', this._handleClick));
+  }
+
+  /**
+   * Enum for toggling side nav visibility
+   * @readonly
+   * @member SideNav.state
+   * @type {Object}
+   * @property {string} EXPANDED Opening/visible
+   * @property {string} COLLAPSED Closing/hidden
+   */
+  static state /* #__PURE_CLASS_PROPERTY__ */ = {
+    EXPANDED: 'expanded',
+    COLLAPSED: 'collapsed',
+  };
+
+  /**
+   * @returns {boolean} `true` if the nav is expanded.
+   */
+  isNavExpanded() {
+    return this.element.classList.contains(this.options.classSideNavExpanded);
+  }
+
+  /**
+   * Changes the expanded/collapsed state.
+   */
+  changeState(state) {
+    this.element.classList.toggle(
+      this.options.classSideNavExpanded,
+      state === this.constructor.state.EXPANDED
+    );
+  }
+
+  _handleClick = evt => {
+    const matchesToggle = eventMatches(evt, this.options.selectorSideNavToggle);
+    const matchesNavSubmenu = eventMatches(
+      evt,
+      this.options.selectorSideNavSubmenu
+    );
+    const matchesSideNavLink = eventMatches(
+      evt,
+      this.options.selectorSideNavLink
+    );
+    if (!matchesToggle && !matchesNavSubmenu && !matchesSideNavLink) {
+      return;
+    }
+    if (matchesToggle) {
+      this.changeState(
+        !this.isNavExpanded()
+          ? this.constructor.state.EXPANDED
+          : this.constructor.state.COLLAPSED
+      );
+      return;
+    }
+    if (matchesNavSubmenu) {
+      const isSubmenuExpanded =
+        matchesNavSubmenu.getAttribute('aria-expanded') === 'true';
+      matchesNavSubmenu.setAttribute('aria-expanded', `${!isSubmenuExpanded}`);
+      return;
+    }
+    if (matchesSideNavLink) {
+      [
+        ...this.element.querySelectorAll(
+          this.options.selectorSideNavLinkCurrent
+        ),
+      ].forEach(el => {
+        el.classList.remove(
+          this.options.classSideNavItemActive,
+          this.options.classSideNavLinkCurrent
+        );
+        el.removeAttribute('aria-current');
+      });
+      matchesSideNavLink.classList.add(this.options.classSideNavLinkCurrent);
+      const closestSideNavItem = matchesSideNavLink.closest(
+        this.options.selectorSideNavItem
+      );
+      if (closestSideNavItem) {
+        closestSideNavItem.classList.add(this.options.classSideNavItemActive);
+      }
+    }
+  };
+
+  /**
+   * The component options.
+   * If `options` is specified in the constructor, {@linkcode SideNav.create .create()}, or {@linkcode SideNav.init .init()},
+   * properties in this object are overriden for the instance being create and how {@linkcode SideNav.init .init()} works.
+   * @member SideNav.options
+   * @type {Object}
+   * @property {string} selectorInit The data attribute to find side navs.
+   */
+  static options /* #__PURE_CLASS_PROPERTY__ */ = {
+    selectorInit: '[data-side-nav]',
+    selectorSideNavToggle: `.${prefix}--side-nav__toggle`,
+    selectorSideNavSubmenu: `.${prefix}--side-nav__submenu`,
+    selectorSideNavItem: `.${prefix}--side-nav__item`,
+    selectorSideNavLink: `.${prefix}--side-nav__link`,
+    selectorSideNavLinkCurrent: `[aria-current="page"],.${prefix}--side-nav__link--current,.${prefix}--side-nav__item--active`,
+    classSideNavExpanded: `${prefix}--side-nav--expanded`,
+    classSideNavItemActive: `${prefix}--side-nav__item--active`,
+    classSideNavLinkCurrent: `${prefix}--side-nav__link--current`,
+  };
+}

package/styles/vendor/carbon-components/src/components/ui-shell/ui-shell.hbs

@@ -0,0 +1,34 @@
+<!-- 
+  Copyright IBM Corp. 2016, 2018
+
+  This source code is licensed under the Apache-2.0 license found in the
+  LICENSE file in the root directory of this source tree.
+-->
+
+{{> header }}
+{{#if sidenav.state.fixed}}
+{{> side-nav-fixed }}
+{{else}}
+{{> side-nav }}
+{{/if}}
+{{> product-switcher }}
+{{> navigation-menu }}
+<div class="bx--content">
+  <h1>Heading</h1>
+  {{#each content}}
+  <h2>Sub-section</h2>
+  <p>
+    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
+    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
+  </p>
+  <p>
+    Elit odit veritatis repudiandae laboriosam amet. Dolore doloribus ut obcaecati harum ad Expedita hic atque quas
+    repellat et sed Tempore similique laudantium autem quam commodi, temporibus. Minus voluptates reiciendis adipisci.
+  </p>
+  <h3>Tertiary section</h3>
+  <p>
+    Adipisicing eius ea est ducimus nihil Sit modi quisquam tempore asperiores at Culpa omnis quasi a rem sapiente,
+    illo Omnis aut maiores magnam perspiciatis at, rerum? Esse ullam veritatis debitis.
+  </p>
+  {{/each}}
+</div>