@progress/kendo-themes-html 5.2.1-dev.6 → 5.3.2-dev.1

package/lib/jsx-runtime.js

@@ -33,6 +33,8 @@ const attrMap = {
 
     showcheckbox: 'showCheckbox',
 
+    swapbutton: 'swapButton',
+
     // Switch
     onlabel: 'onLabel',
     offlabel: 'offLabel',
@@ -49,7 +51,10 @@ const attrMap = {
     leafclassname: 'leafClassName',
 
     // Template
-    contenttemplate: 'contentTemplate'
+    contenttemplate: 'contentTemplate',
+
+    // ColorPalette
+    tilesize: 'tileSize'
 };
 
 const booleanAttr = new Set([
@@ -81,6 +86,10 @@ const booleanAttr = new Set([
 
     'showCheckbox',
 
+    'swapButton',
+
+    'loading',
+
     'virtualization',
     'root',
 
@@ -103,7 +112,9 @@ const nullAttr = new Set([
     'themeColor',
 
     'trackRounded',
-    'thumbRounded'
+    'thumbRounded',
+
+    'callout'
 ]);
 
 const skipAttr = new Set([

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "5.2.1-dev.6",
+  "version": "5.3.2-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -42,5 +42,5 @@
     "@rollup/plugin-node-resolve": "^13.1.2",
     "rollup": "^2.62.0"
   },
-  "gitHead": "2ceeec1399fcc1bb057257c25da8b4512378b079"
+  "gitHead": "319161d84b0538ac9302f05b164c7d54095f8830"
 }

package/src/button/action-buttons.jsx

@@ -0,0 +1,62 @@
+import { Component, globalDefaultProps } from '../component/index';
+
+class ActionButtons extends Component {
+    render() {
+        return <ActionButtonsStatic {...this.props} />;
+    }
+}
+
+function ActionButtonsStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        alignment,
+        orientation,
+        children,
+
+        aria,
+
+        ...htmlAttributes
+    } = props;
+
+    let ActionButtonsClasses = [
+        ownClassName,
+        'k-actions',
+        `k-actions-${alignment}`,
+        `k-actions-${orientation}`
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+
+    return (
+        <div className={ActionButtonsClasses} {...ariaAttr} {...htmlAttributes}>
+            <>{children}</>
+        </div>
+    );
+}
+
+ActionButtonsStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: [],
+    alignment: 'start',
+    orientation: 'horizontal'
+
+};
+
+ActionButtonsStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    alignment: typeof ['start', 'center', 'end', 'stretched'],
+    orientation: typeof ['horizontal', 'vertical'],
+    aria: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { ActionButtons, ActionButtonsStatic };

package/src/button/index.js

@@ -1,2 +1,3 @@
 export * from './button.jsx';
 export * from './button-group.jsx';
+export * from './action-buttons.jsx';

package/src/captcha/README.md

@@ -0,0 +1,74 @@
+```html
+<!-- default rendering -->
+<div class="k-captcha">
+  <div class="k-captcha-image-wrap k-hstack">
+    <div class="k-captcha-image">
+      <img class="" src="../../../assets/captcha.jpg">
+    </div>
+    <div class="k-captcha-image-controls k-vstack">
+      <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button">
+        <span class="k-button-icon k-icon k-i-volume-up"></span>
+      </button>
+      <button type="button" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button">
+        <span class="k-button-icon k-icon k-i-reload"></span>
+      </button>
+    </div>
+    <div class="k-captcha-volume-control k-vstack k-pos-absolute k-hidden">
+      <div class="k-widget k-slider k-slider-vertical"></div>
+    </div>
+  </div>
+  <div class="k-captcha-input k-vstack">
+    <span class="k-textbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off">
+      <input type="text" class="k-input-inner" value="YR890" autocomplete="off">
+    </span>
+  </div>
+</div>
+
+<!-- canonical rendering -->
+
+<div class="
+    k-captcha
+    ${loading && 'k-captcha-loading'}
+
+    ${disabled && 'k-disabled'}
+">
+  <div class="k-captcha-image-wrap k-hstack">
+    <div class="k-captcha-image">
+      <img class="
+         ${loading && 'k-hidden'}
+
+       " src="../../../assets/captcha.jpg">
+
+       {loading && <span style="width: 100%; height: 100%;" class="k-skeleton k-skeleton-rect"></span>}
+    </div>
+
+    <div class="k-captcha-image-controls k-vstack">
+      <button type="button" class="
+                            ${loading && 'k-disabled'}
+                            k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button
+                            ">
+        <span class="k-button-icon k-icon k-i-volume-up"></span>
+      </button>
+      <button type="button" class="
+                            ${loading && 'k-disabled'}
+                            k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-icon-button
+                            ">
+        <span class="k-button-icon k-icon k-i-reload"></span>
+      </button>
+    </div>
+    <div class="k-captcha-volume-control k-vstack k-pos-absolute k-hidden">
+      <div class="k-widget k-slider k-slider-vertical"></div>
+    </div>
+  </div>
+  <div class="k-captcha-input k-vstack">
+    <span class="
+            ${loading && 'k-disabled'}
+            k-textbox k-input k-input-md k-rounded-md k-input-solid
+            " type="text" autocomplete="off">
+      <input type="text" class="k-input-inner" value="{value}" autocomplete="off">
+    </span>
+    {valid && loading !== true && <span class="k-captcha-validation-message k-text-success">{successMessage}</span>}
+  </div>
+</div>
+
+```

package/src/captcha/captcha-image.jsx

@@ -0,0 +1,73 @@
+import { Component, globalDefaultProps } from '../component/index';
+import { ButtonStatic } from '../button/index';
+
+class CaptchaImage extends Component {
+    render() {
+        return <CaptchaImageStatic {...this.props} />;
+    }
+}
+
+function CaptchaImageStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        loading,
+
+        aria,
+
+        ...htmlAttributes
+
+    } = props;
+
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    let CaptchaImageClasses = [
+        ownClassName,
+        'k-captcha-image-wrap',
+        'k-hstack'
+    ];
+
+    const imgAttributes = {
+        className: loading && "k-hidden",
+        src: "../../../assets/captcha.jpg",
+    };
+
+    const buttonDisabled = loading === true;
+
+    return (
+        <div className={CaptchaImageClasses} {...ariaAttr} {...htmlAttributes}>
+            <div className="k-captcha-image">
+                <img {...imgAttributes} />
+                {loading && <span style="width: 100%; height: 100%;" className="k-skeleton k-skeleton-rect"></span>}
+            </div>
+            <div className="k-captcha-image-controls k-vstack">
+                <ButtonStatic icon="volume-up" disabled={buttonDisabled}></ButtonStatic>
+                <ButtonStatic icon="reload" disabled={buttonDisabled}></ButtonStatic>
+            </div>
+            <div className="k-captcha-volume-control k-vstack k-pos-absolute k-hidden">
+                <div className="k-widget k-slider k-slider-vertical"></div>
+            </div>
+        </div>
+    );
+}
+
+CaptchaImageStatic.defaultProps = {
+    ...globalDefaultProps,
+    loading: false,
+};
+
+CaptchaImageStatic.propTypes = {
+    className: typeof '',
+
+    loading: typeof false,
+
+    aria: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { CaptchaImage, CaptchaImageStatic };

package/src/captcha/captcha.jsx

@@ -0,0 +1,85 @@
+import { Component, globalDefaultProps } from '../component/index';
+import { CaptchaImageStatic } from '../captcha/index';
+import { TextboxStatic } from '../textbox/index';
+
+class Captcha extends Component {
+    render() {
+        return <CaptchaStatic {...this.props} />;
+    }
+}
+
+function CaptchaStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        loading,
+        value,
+
+        valid,
+        invalid,
+        disabled,
+
+        aria,
+
+        ...htmlAttributes
+
+    } = props;
+
+    htmlAttributes.disabled = disabled;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    let captchaClasses = [
+        ownClassName,
+        'k-captcha',
+        {
+            'k-captcha-loading': loading === true,
+            'k-disabled': disabled === true,
+        }
+    ];
+
+    const textBoxAttributes = {
+        value,
+        showClearButton: false,
+        invalid,
+        disabled: loading === true
+    };
+
+
+    return (
+        <div className={captchaClasses} {...ariaAttr} {...htmlAttributes}>
+            <CaptchaImageStatic loading={loading}></CaptchaImageStatic>
+
+            <div className="k-captcha-input k-vstack">
+                <TextboxStatic {...textBoxAttributes}></TextboxStatic>
+                {valid && !loading && <span className="k-captcha-validation-message k-text-success">Verification Success</span>}
+            </div>
+        </div>
+    );
+}
+
+CaptchaStatic.defaultProps = {
+    ...globalDefaultProps,
+    loading: false,
+    value: '',
+};
+
+CaptchaStatic.propTypes = {
+    className: typeof '',
+
+    loading: typeof false,
+    value: typeof '',
+
+    valid: typeof false,
+    invalid: typeof false,
+    disabled: typeof false,
+
+    aria: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Captcha, CaptchaStatic };

package/src/captcha/index.js

@@ -0,0 +1,2 @@
+export * from './captcha.jsx';
+export * from './captcha-image.jsx';

package/src/chip/chip-list.jsx

@@ -27,11 +27,7 @@ function ChipListStatic(props) {
     let listClasses = [
         ownClassName,
         'k-chip-list',
-        styles.sizeClass( size, 'k-chip-list' ),
-        {
-            'k-selection-single': selection === 'single',
-            'k-selection-multiple': selection === 'multiple'
-        }
+        styles.sizeClass( size, 'k-chip-list' )
     ];
 
 

package/src/colorpalette/README.md

@@ -0,0 +1,33 @@
+# ColorPalette
+
+```html
+<!-- default rendering -->
+<div class="k-colorpalette">
+    <div class="k-colorpalette-table-wrap">
+        <table class="k-colorpalette-table k-palette">
+            <tr>
+                <td class="k-colorpalette-tile" style="background-color: #ffffff;"></td>
+                <td class="k-colorpalette-tile" style="background-color: #000000;"></td>
+            </tr>
+        </table>
+    </div>
+</div>
+
+
+<!-- canonical rendering -->
+<div class="k-colorpalette {disabled && 'k-disabled'}">
+    <div class="k-colorpalette-table-wrap">
+        <table class="k-colorpalette-table k-palette">
+            <tr>
+                <td class="k-colorpalette-tile
+                    style="background-color: {color}
+                    {hover && 'k-hover'}
+                    {focus && 'k-focus'}
+                    {selected && 'k-selected'}
+                ">
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
+```

package/src/colorpalette/colorpalette-presets.jsx

@@ -0,0 +1,50 @@
+export const PALETTEPRESETS = {
+    basic: {
+        colors: ['#000000', '#7f7f7f', '#880015', '#ed1c24', '#ff7f27', '#fff200', '#22b14c', '#00a2e8', '#3f48cc', '#a349a4', '#ffffff', '#c3c3c3', '#b97a57', '#ffaec9', '#ffc90e', '#efe4b0', '#b5e61d', '#99d9ea', '#7092be', '#c8bfe7'],
+        columns: 10
+    },
+    office: {
+        colors: ['#ffffff', '#000000', '#e6e6e6', '#435569', '#4371c4', '#ed7e32', '#a5a4a5', '#febf04', '#5a9bd5', '#71ae48', '#f2f2f3', '#7f7f7f', '#d1cece', '#d5dde3', '#dae1f4', '#fce5d4', '#deeded', '#fff2cc', '#deeaf6', '#e1efd9', '#d7d8d8', '#585959', '#aeabab', '#adbaca', '#b4c5e7', '#f6caac', '#dbdbdb', '#ffe498', '#bcd6ee', '#c5e0b2', '#bfbfc0', '#3f3f3f', '#767070', '#8595b1', '#8fabdb', '#f5b183', '#c9c8c9', '#fed965', '#9bc4e5', '#a8d08d', '#a5a5a6', '#262625', '#393939', '#334050', '#2e5496', '#c45a11', '#7b7b7a', '#bf9000', '#2f75b5', '#548235', '#7f7f7f', '#0b0c0c', '#161616', '#222a34', '#203764', '#843d0b', '#525252', '#7f6000', '#1d4d79', '#375623'],
+        columns: 10
+    },
+    apex: {
+        colors: ['#ffffff', '#000000', '#c9c2d1', '#69676d', '#ceb966', '#9cb084', '#6bb1c9', '#6585cf', '#7e6bc9', '#a379bb', '#f2f2f2', '#7f7f7f', '#f4f2f5', '#e0e0e2', '#f5f1e0', '#ebefe6', '#e1eff4', '#e0e6f5', '#e5e1f4', '#ece4f1', '#d8d8d8', '#595959', '#e9e6ec', '#c2c1c5', '#ebe3c1', '#d7dfcd', '#c3dfe9', '#c1ceeb', '#cbc3e9', '#dac9e3', '#bfbfbf', '#3f3f3f', '#dedae3', '#a4a3a8', '#e1d5a3', '#c3cfb5', '#a6d0de', '#a2b5e2', '#b1a6de', '#c7aed6', '#a5a5a5', '#262626', '#9688a5', '#4e4d51', '#ae9638', '#758c5a', '#3d8da9', '#365bb0', '#533da9', '#7d4d99', '#7f7f7f', '#0c0c0c', '#635672', '#343336', '#746425', '#4e5d3c', '#295e70', '#243c75', '#372970', '#533366'],
+        columns: 10
+    },
+    austin: {
+        colors: ['#ffffff', '#000000', '#caf278', '#3e3d2d', '#94c600', '#71685a', '#ff6700', '#909465', '#956b43', '#fea022', '#f2f2f2', '#7f7f7f', '#f4fce4', '#dddcd0', '#efffc0', '#e3e1dc', '#ffe0cb', '#e8e9df', '#ece1d6', '#feecd2', '#d8d8d8', '#595959', '#e9f9c9', '#bbb9a1', '#dfff82', '#c8c3ba', '#ffc299', '#d2d4c0', '#dac3ad', '#fed9a6', '#bfbfbf', '#3f3f3f', '#dff7ae', '#ada598', '#cfff43', '#ada598', '#ffa365', '#bcbfa1', '#c8a585', '#fec67a', '#a5a5a5', '#262626', '#a9ea25', '#2e2d21', '#6f9400', '#544e43', '#bf4d00', '#6c6f4b', '#6f5032', '#d77b00', '#7f7f7f', '#0c0c0c', '#74a50f', '#1f1e16', '#4a6300', '#38342d', '#7f3300', '#484a32', '#4a3521', '#8f5200'],
+        columns: 10
+    },
+    clarity: {
+        colors: ['#ffffff', '#292934', '#f3f2dc', '#d2533c', '#93a299', '#ad8f67', '#726056', '#4c5a6a', '#808da0', '#79463d', '#f2f2f2', '#e7e7ec', '#e7e5b9', '#f6dcd8', '#e9ecea', '#eee8e0', '#e4dedb', '#d8dde3', '#e5e8ec', '#e9d6d3', '#d8d8d8', '#c4c4d1', '#d5d185', '#edbab1', '#d3d9d6', '#ded2c2', '#c9beb8', '#b2bcc8', '#ccd1d9', '#d3aea7', '#bfbfbf', '#8a8aa3', '#aca73b', '#e4978a', '#bec7c1', '#cdbba3', '#af9e94', '#8c9bac', '#b2bac6', '#bd857c', '#a5a5a5', '#56566e', '#56531d', '#a43925', '#6b7c72', '#866b48', '#554840', '#39434f', '#5c697b', '#5a342d', '#7f7f7f', '#3b3b4b', '#22210b', '#6d2619', '#47534c', '#594730', '#39302b', '#262d35', '#3d4652', '#3c231e'],
+        columns: 10
+    },
+    slipstream: {
+        colors: ['#ffffff', '#000000', '#b4dcfa', '#212745', '#4e67c8', '#5eccf3', '#a7ea52', '#5dceaf', '#ff8021', '#f14124', '#f2f2f2', '#7f7f7f', '#8bc9f7', '#c7cce4', '#dbe0f4', '#def4fc', '#edfadc', '#def5ef', '#ffe5d2', '#fcd9d3', '#d8d8d8', '#595959', '#4facf3', '#909aca', '#b8c2e9', '#beeafa', '#dbf6b9', '#beebdf', '#ffcca6', '#f9b3a7', '#bfbfbf', '#3f3f3f', '#0d78c9', '#5967af', '#94a3de', '#9ee0f7', '#caf297', '#9de1cf', '#ffb279', '#f68d7b', '#a5a5a5', '#262626', '#063c64', '#181d33', '#31479f', '#11b2eb', '#81d319', '#34ac8b', '#d85c00', '#c3260c', '#7f7f7f', '#0c0c0c', '#021828', '#101322', '#202f6a', '#0b769c', '#568c11', '#22725c', '#903d00', '#821908'],
+        columns: 10
+    },
+    metro: {
+        colors: ['#ffffff', '#000000', '#d6ecff', '#4e5b6f', '#7fd13b', '#ea157a', '#feb80a', '#00addc', '#738ac8', '#1ab39f', '#f2f2f2', '#7f7f7f', '#a7d6ff', '#d9dde4', '#e5f5d7', '#fad0e4', '#fef0cd', '#c5f2ff', '#e2e7f4', '#c9f7f1', '#d8d8d8', '#595959', '#60b5ff', '#b3bcca', '#cbecb0', '#f6a1c9', '#fee29c', '#8be6ff', '#c7d0e9', '#94efe3', '#bfbfbf', '#3f3f3f', '#007dea', '#8d9baf', '#b2e389', '#f272af', '#fed46b', '#51d9ff', '#aab8de', '#5fe7d5', '#a5a5a5', '#262626', '#003e75', '#3a4453', '#5ea226', '#af0f5b', '#c58c00', '#0081a5', '#425ea9', '#138677', '#7f7f7f', '#0c0c0c', '#00192e', '#272d37', '#3f6c19', '#750a3d', '#835d00', '#00566e', '#2c3f71', '#0c594f'],
+        columns: 10
+    },
+    flow: {
+        colors: ['#ffffff', '#000000', '#dbf5f9', '#04617b', '#0f6fc6', '#009dd9', '#0bd0d9', '#10cf9b', '#7cca62', '#a5c249', '#f2f2f2', '#7f7f7f', '#b2e9f2', '#b4ecfc', '#c7e2fa', '#c4eeff', '#c9fafc', '#c9faed', '#e4f4df', '#edf2da', '#d8d8d8', '#595959', '#76d9e8', '#6adafa', '#90c6f6', '#89deff', '#93f5f9', '#94f6db', '#cae9c0', '#dbe6b6', '#bfbfbf', '#3f3f3f', '#21b2c8', '#20c8f7', '#59a9f2', '#4fceff', '#5df0f6', '#5ff2ca', '#b0dfa0', '#c9da91', '#a5a5a5', '#262626', '#105964', '#02485c', '#0b5394', '#0075a2', '#089ca2', '#0b9b74', '#54a838', '#7e9532', '#7f7f7f', '#0c0c0c', '#062328', '#01303d', '#073763', '#004e6c', '#05686c', '#07674d', '#387025', '#546321'],
+        columns: 10
+    },
+    hardcover: {
+        colors: ['#ffffff', '#000000', '#ece9c6', '#895d1d', '#873624', '#d6862d', '#d0be40', '#877f6c', '#972109', '#aeb795', '#f2f2f2', '#7f7f7f', '#e1dca5', '#f2e0c6', '#f0d0c9', '#f6e6d5', '#f5f2d8', '#e7e5e1', '#fbc7bc', '#eef0e9', '#d8d8d8', '#595959', '#d0c974', '#e6c28d', '#e2a293', '#eeceaa', '#ece5b2', '#cfccc3', '#f78f7a', '#dee2d4', '#bfbfbf', '#3f3f3f', '#a29a36', '#daa454', '#d4735e', '#e6b681', '#e2d88c', '#b7b2a5', '#f35838', '#ced3bf', '#a5a5a5', '#262626', '#514d1b', '#664515', '#65281a', '#a2641f', '#a39428', '#655f50', '#711806', '#879464', '#7f7f7f', '#0c0c0c', '#201e0a', '#442e0e', '#431b11', '#6c4315', '#6d621a', '#433f35', '#4b1004', '#5a6243'],
+        columns: 10
+    },
+    trek: {
+        colors: ['#ffffff', '#000000', '#fbeec9', '#4e3b30', '#f0a22e', '#a5644e', '#b58b80', '#c3986d', '#a19574', '#c17529', '#f2f2f2', '#7f7f7f', '#f7e09e', '#e1d6cf', '#fcecd5', '#eddfda', '#f0e7e5', '#f3eae1', '#ece9e3', '#f5e3d1', '#d8d8d8', '#595959', '#f3cc5f', '#c4ad9f', '#f9d9ab', '#dcc0b6', '#e1d0cc', '#e7d5c4', '#d9d4c7', '#ebc7a3', '#bfbfbf', '#3f3f3f', '#d29f0f', '#a78470', '#f6c781', '#cba092', '#d2b9b2', '#dbc1a7', '#c6bfab', '#e1ac76', '#a5a5a5', '#262626', '#694f07', '#3a2c24', '#c87d0e', '#7b4b3a', '#926255', '#a17242', '#7b7153', '#90571e', '#7f7f7f', '#0c0c0c', '#2a1f03', '#271d18', '#855309', '#523226', '#614138', '#6b4c2c', '#524b37', '#603a14'],
+        columns: 10
+    },
+    verve: {
+        colors: ['#ffffff', '#000000', '#d2d2d2', '#666666', '#ff388c', '#e40059', '#9c007f', '#68007f', '#005bd3', '#00349e', '#f2f2f2', '#7f7f7f', '#bdbdbd', '#e0e0e0', '#ffd7e8', '#ffc6dc', '#ffb8f1', '#f1b2ff', '#c3dcff', '#b8cfff', '#d8d8d8', '#595959', '#9d9d9d', '#c1c1c1', '#ffafd1', '#ff8eba', '#ff71e4', '#e365ff', '#87baff', '#72a0ff', '#bfbfbf', '#3f3f3f', '#696969', '#a3a3a3', '#ff87ba', '#ff5597', '#ff2ad7', '#d519ff', '#4b98ff', '#2b71ff', '#a5a5a5', '#262626', '#343434', '#4c4c4c', '#e90062', '#ab0042', '#75005f', '#4e005f', '#00449e', '#002676', '#7f7f7f', '#0c0c0c', '#151515', '#333333', '#9b0041', '#72002c', '#4e003f', '#34003f', '#002d69', '#00194f'],
+        columns: 10
+    },
+    monochrome: {
+        colors: ['#000000', '#1a1a1a', '#333333', '#4d4d4d', '#666666', '#808080', '#999999', '#b3b3b3', '#cccccc', '#e6e6e6', '#f2f2f2', '#ffffff'],
+        columns: 12
+    }
+};

package/src/colorpalette/colorpalette-row.jsx

@@ -0,0 +1,39 @@
+import { Component, globalDefaultProps } from '../component/index';
+
+class ColorPaletteRow extends Component {
+    render() {
+        return <ColorPaletteRowStatic {...this.props} />;
+    }
+}
+
+function ColorPaletteRowStatic(props) {
+    const {
+        className: ownClassName,
+
+        aria,
+
+        ...htmlAttributes
+    } = props;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    return (
+        <tr {...ariaAttr} {...htmlAttributes}></tr>
+    );
+}
+
+ColorPaletteRowStatic.defaultProps = {
+    ...globalDefaultProps,
+};
+
+ColorPaletteRowStatic.propTypes = {
+    className: typeof '',
+
+    aria: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { ColorPaletteRow, ColorPaletteRowStatic };

package/src/colorpalette/colorpalette-tile.jsx

@@ -0,0 +1,72 @@
+import { Component, globalDefaultProps } from '../component/index';
+
+class ColorPaletteTile extends Component {
+    render() {
+        return <ColorPaletteTileStatic {...this.props} />;
+    }
+}
+
+function ColorPaletteTileStatic(props) {
+    const {
+        className: ownClassName,
+
+        color,
+        tileSize,
+
+        hover,
+        focus,
+        selected,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let colorPaletteTileClasses = [
+        ownClassName,
+        'k-colorpalette-tile',
+        {
+            'k-hover': hover === true,
+            'k-focus': focus === true,
+            'k-selected': selected === true
+        }
+    ];
+
+    let styles = {
+        'background-color': color,
+        'width': tileSize ? tileSize + "px" : '',
+        'height': tileSize ? tileSize + "px" : ''
+    };
+
+    let ariaAttr = aria;
+
+    return (
+        <td className={colorPaletteTileClasses} {...ariaAttr} {...htmlAttributes} style={styles}></td>
+    );
+}
+
+ColorPaletteTileStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    color: '',
+    tileSize: ''
+};
+
+ColorPaletteTileStatic.propTypes = {
+    className: typeof '',
+
+    color: typeof '',
+    tileSize: typeof '',
+
+    hover: typeof false,
+    focus: typeof false,
+    selected: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { ColorPaletteTile, ColorPaletteTileStatic };

package/src/colorpalette/colorpalette.jsx

@@ -0,0 +1,103 @@
+import { Component, globalDefaultProps } from '../component/index';
+import { ColorPaletteRowStatic } from './colorpalette-row.jsx';
+import { ColorPaletteTileStatic } from './colorpalette-tile.jsx';
+import { PALETTEPRESETS } from './colorpalette-presets.jsx';
+
+class ColorPalette extends Component {
+
+    init() {
+        let preset = PALETTEPRESETS[this._props.palette];
+        let columns = this._props.columns;
+        let tileSize = this._props.tileSize;
+        let newChildren = [];
+
+        if (!preset) { return; }
+
+        columns = columns || preset.columns;
+
+        Array.from({ length: Math.ceil(preset.colors.length / columns) }, (_, i) => {
+            let row = <ColorPaletteRowStatic></ColorPaletteRowStatic>;
+
+            preset.colors.slice(i * columns, (i + 1) * columns)
+                .map((color) => {
+                    row.props.children.push( <ColorPaletteTileStatic color={color} tileSize={tileSize} /> );
+                })
+
+            newChildren.push(row);
+        });
+
+        this._props.children = newChildren;
+    }
+
+    render() {
+        return <ColorPaletteStatic {...this.props} />;
+    }
+}
+
+function ColorPaletteStatic(props) {
+    const {
+        className: ownClassName,
+        children,
+
+        palette,
+        columns,
+        tileSize,
+
+        disabled,
+
+        aria,
+        legacy,
+
+        ...htmlAttributes
+    } = props;
+
+    let colorPaletteClasses = [
+        ownClassName,
+        'k-colorpalette',
+        {
+            'k-disabled': disabled === true
+        }
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+    return (
+        <div className={colorPaletteClasses} {...ariaAttr} {...htmlAttributes}>
+            <div className="k-colorpalette-table-wrap">
+                <table className="k-colorpalette-table k-palette">
+                    {children}
+                </table>
+            </div>
+        </div>
+    );
+}
+
+ColorPaletteStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    className: '',
+
+    palette: 'office',
+    columns: 10,
+    tileSize: ''
+};
+
+ColorPaletteStatic.propTypes = {
+    children: typeof [],
+
+    palette: typeof '',
+    columns: typeof '',
+    tileSize: typeof '',
+
+    disabled: typeof false,
+
+    aria: typeof false,
+    legacy: typeof false,
+
+    className: typeof '',
+    htmlAttributes: typeof []
+};
+
+export { ColorPalette, ColorPaletteStatic };

package/src/colorpalette/index.js

@@ -0,0 +1,3 @@
+export * from './colorpalette-row.jsx';
+export * from './colorpalette-tile.jsx';
+export * from './colorpalette.jsx';

package/src/daterangepicker/daterangepicker.jsx

@@ -1,4 +1,6 @@
 import { globalDefaultProps, Component } from '../component/index';
+import { ButtonStatic } from '../button/index';
+import { IconStatic } from '../icon/index';
 import { FloatingLabelStatic } from '../input/index';
 import { DateInputStatic } from '../dateinput/index';
 
@@ -17,6 +19,8 @@ function DateRangePickerStatic(props) {
         rounded,
         fillMode,
 
+        swapButton,
+
         disabled,
 
         aria,
@@ -47,6 +51,11 @@ function DateRangePickerStatic(props) {
             <FloatingLabelStatic label="Start">
                 <DateInputStatic showSpinButton="false" {...dateInputAttributes}/>
             </FloatingLabelStatic>
+            {swapButton &&
+                <ButtonStatic className="k-icon-button" rounded={rounded} size={size} fillMode="flat" themeColor="base">
+                    <IconStatic className="k-button-icon" name="arrows-swap" style="transform: rotate(90deg);"/>
+                </ButtonStatic>
+            }
             <FloatingLabelStatic label="End">
                 <DateInputStatic showSpinButton="false" {...dateInputAttributes}/>
             </FloatingLabelStatic>
@@ -69,6 +78,8 @@ DateRangePickerStatic.propTypes = {
     rounded: typeof [ null, 'small', 'medium', 'large', 'full' ],
     fillMode: typeof [ null, 'solid', 'flat', 'outline' ],
 
+    swapButton: typeof false,
+
     disabled: typeof false,
 
     aria: typeof false,

package/src/index.js

@@ -18,6 +18,9 @@ window.addEventListener('DOMContentLoaded', init);
 // Dependencies
 export * from './component/index';
 
+// Typography and utils
+export * from './typography/index';
+
 // Generic content
 export * from './icon/index';
 
@@ -50,7 +53,8 @@ export * from './radio/index';
 
 // Augmented inputs
 export * from './autocomplete/index';
-// export * from './captcha/index';
+export * from './colorpalette/index';
+export * from './captcha/index';
 export * from './colorpicker/index';
 export * from './combobox/index';
 export * from './dateinput/index';
@@ -81,7 +85,7 @@ export * from './menu/index';
 // export * from './dialog/index';
 // export * from './drawer/index';
 // export * from './notification/index';
-// export * from './popover/index';
+export * from './popover/index';
 // export * from './tooltip/index';
 // export * from './window/index';
 

package/src/popover/README.md

@@ -0,0 +1,40 @@
+```html
+<!-- default rendering -->
+<div class="k-popover">
+    <div class="k-popover-callout k-callout-s"></div>
+    <div class="k-popover-header">Title</div>
+    <div class="k-popover-body">Body content</div>
+    <div class="k-popover-actions k-actions k-actions-stretched">
+        <button type="button" class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base">
+            <span class="k-button-text">Action</span>
+        </button>
+        <button type="button" class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary">
+            <span class="k-button-text">Primary</span>
+        </button>
+    </div>
+</div>
+
+<!-- canonical rendering -->
+
+<div class="k-popover">
+    {callout && <div class="
+                k-popover-callout
+                k-callout-{callout}
+                "></div>
+    {title && <div class="k-popover-header">{title}</div>}
+    {body && <div class="k-popover-body">{body}</div>}
+    <div class="
+        k-popover-actions
+        k-actions
+        k-actions-{alignment}
+    ">
+        <button type="button" class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-{themeColor}">
+            <span class="k-button-text">Action</span>
+        </button>
+        <button type="button" class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary">
+            <span class="k-button-text">Primary</span>
+        </button>
+    </div>
+</div>
+
+```

package/src/popover/index.js

@@ -0,0 +1 @@
+export * from './popover.jsx';

package/src/popover/popover.jsx

@@ -0,0 +1,73 @@
+import * as styles from '../../utils/styles';
+import { Component, globalDefaultProps } from '../component/index';
+
+class Popover extends Component {
+    render() {
+        return <PopoverStatic {...this.props} />;
+    }
+}
+
+function PopoverStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        callout,
+        title,
+        body,
+
+        children,
+
+        aria,
+
+        ...htmlAttributes
+    } = props;
+
+    let PopoverClasses = [
+        ownClassName,
+        'k-popover',
+    ];
+
+    let PopoverCalloutClasses = [
+        'k-popover-callout',
+        styles.calloutClass( callout )
+    ];
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+
+    return (
+        <div className={PopoverClasses} {...ariaAttr} {...htmlAttributes}>
+            {callout && <div className={PopoverCalloutClasses}></div>}
+            {title && <div className="k-popover-header">{title}</div>}
+            {body && <div className="k-popover-body">{body}</div>}
+            <>{children}</>
+        </div>
+    );
+}
+
+PopoverStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: [],
+    callout: null,
+    title: '',
+    body: '',
+};
+
+PopoverStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    callout: typeof [ null, 'top', 'bottom', 'left', 'right'],
+    title: typeof '',
+    body: typeof '',
+
+    aria: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Popover, PopoverStatic };

package/src/typography/README.md

@@ -0,0 +1,33 @@
+## Headings
+
+```html
+    <h1 class="k-h1">Heading 1</h1>
+    <h2 class="k-h2">Heading 2</h2>
+    <h3 class="k-h3">Heading 3</h3>
+    <h4 class="k-h4">Heading 4</h4>
+    <h5 class="k-h5">Heading 5</h5>
+    <h6 class="k-h6">Heading 6</h6>
+```
+
+## Displays
+
+```html
+    <div class="k-display-1">Display 1</div>
+    <div class="k-display-2">Display 2</div>
+    <div class="k-display-3">Display 3</div>
+    <div class="k-display-4">Display 4</div>
+```
+
+## Others
+
+```html
+<p class="k-paragraph">A paragraph of regular body text</p>
+
+<pre class="k-pre">
+    <code class="k-code">const handleChange = ({ target }) =&gt; {
+        const { name, value } = target;
+        const newData = Object.assign({}, data, { [name]: value });
+        setData(newData);
+    }</code>
+</pre>
+```

package/src/typography/index.js

@@ -0,0 +1 @@
+export * from './typography.jsx';

package/src/typography/typography.jsx

@@ -0,0 +1,62 @@
+import { Component, globalDefaultProps } from '../component/index';
+
+class Typography extends Component {
+    render() {
+        return <TypographyStatic {...this.props} />;
+    }
+}
+
+function TypographyStatic(props) {
+
+    const {
+        className: ownClassName,
+
+        type,
+
+        children,
+
+        aria,
+
+        ...htmlAttributes
+    } = props;
+
+    const typeClass = type === 'p' ? 'paragraph' : type;
+
+    let TypographyClasses = [
+        ownClassName,
+        type && `k-${typeClass}`,
+    ];
+
+    const Component = type === null || type.includes('display') ? 'div' : type;
+
+    let ariaAttr = aria
+        ? {}
+        : {};
+
+
+    return (
+        <Component className={TypographyClasses} {...ariaAttr} {...htmlAttributes}>
+           {children}
+        </Component>
+    );
+}
+
+TypographyStatic.defaultProps = {
+    ...globalDefaultProps,
+
+    children: [],
+    type: null,
+};
+
+TypographyStatic.propTypes = {
+    children: typeof [],
+    className: typeof '',
+
+    type: typeof [null, 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code', 'pre', 'display-1', 'display-2', 'display-3', 'display-4'],
+
+    aria: typeof false,
+
+    htmlAttributes: typeof []
+};
+
+export { Typography, TypographyStatic };

package/utils/component-options.json

@@ -66,7 +66,8 @@
             "solid": "solid",
             "flat": "flat",
             "outline": "outline",
-            "link": "link"
+            "link": "link",
+            "clear": "clear"
         },
         "shape": {
             "rectangle": "rectangle",

package/utils/styles.js

@@ -14,6 +14,13 @@ const roundedMap = {
     'large': 'lg'
 };
 
+const calloutMap = {
+    'top': 'n',
+    'bottom': 's',
+    'left': 'w',
+    'right': 'e'
+};
+
 function lookup( map, key ) {
     let result = map[key];
 
@@ -80,6 +87,14 @@ function positionClass( position, prefix ) {
     return `k-pos-absolute ${prefix}-${position}`;
 }
 
+function calloutClass( callout ) {
+    if ( callout === null ) {
+        return '';
+    }
+
+    return `k-callout-${lookup(calloutMap, callout)}`;
+}
+
 function classNames( ...args ) {
 
     /* eslint-disable arrow-body-style, no-nested-ternary */
@@ -140,6 +155,7 @@ export {
     themeColorClass,
     borderedClass,
     positionClass,
+    calloutClass,
 
     classNames,
     cssStyle,