diff --git a/dist/cjs/hy-baseline.cjs.entry.js b/dist/cjs/hy-baseline.cjs.entry.js
index 532fee1c302fd54a26b7ce3c8c6f3750c9051c61..69c6c4b1b86f9f78e023fead5a7122ec94cfc3cf 100644
--- a/dist/cjs/hy-baseline.cjs.entry.js
+++ b/dist/cjs/hy-baseline.cjs.entry.js
@@ -2,7 +2,7 @@
Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-552c6bcd.js');
+const index = require('./index-8ee21469.js');
const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
diff --git a/dist/cjs/loader.cjs.js b/dist/cjs/loader.cjs.js
index 202f517ace61ad9c562f907f273635439f2902f9..88e0857c1d8c9be1ec0c5b05fe97987fde4c98e4 100644
--- a/dist/cjs/loader.cjs.js
+++ b/dist/cjs/loader.cjs.js
@@ -2,7 +2,7 @@
Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-552c6bcd.js');
+const index = require('./index-8ee21469.js');
const defineCustomElements = (win, options) => index.patchEsm().then(() => {
return index.bootstrapLazy([["hy-baseline.cjs",[[4,"hy-baseline"]]],["hy-accordion-container_15.cjs",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
diff --git a/dist/collection/collection-manifest.json b/dist/collection/collection-manifest.json
index a308211fd51e71e6bde95f24b46ebc17c0fe6d5f..0d7b6f7bd9c183c2f53e652082261a545b7a5c85 100644
--- a/dist/collection/collection-manifest.json
+++ b/dist/collection/collection-manifest.json
@@ -19,7 +19,7 @@
],
"compiler": {
"name": "@stencil/core",
- "version": "1.11.2",
+ "version": "1.11.3",
"typescriptVersion": "3.8.3"
},
"collections": [],
diff --git a/dist/esm-es5/hy-baseline.entry.js b/dist/esm-es5/hy-baseline.entry.js
index abf336a1ca7fbd24f3347e43ea38aee1ce4b6762..3747760cba61715a90bbc2bdf8382f88de726a8c 100644
--- a/dist/esm-es5/hy-baseline.entry.js
+++ b/dist/esm-es5/hy-baseline.entry.js
@@ -1,15 +1,13 @@
-import { r as registerInstance, h } from './index-d8f759a7.js';
-
-const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
-
-const Baseline = class {
- constructor(hostRef) {
+import { r as registerInstance, h } from './index-5809f4b1.js';
+var baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
+var Baseline = /** @class */ (function () {
+ function Baseline(hostRef) {
registerInstance(this, hostRef);
}
- render() {
+ Baseline.prototype.render = function () {
return (h("div", { class: "hy-baseline" }, h("slot", null)));
- }
-};
+ };
+ return Baseline;
+}());
Baseline.style = baselineCss;
-
export { Baseline as hy_baseline };
diff --git a/dist/esm-es5/loader.mjs b/dist/esm-es5/loader.mjs
index 3859fb525bee1d6e237a89b955e9f1c1c4f8fc17..61ee2aeb43164a8b7708628a91a37b55422a692a 100644
--- a/dist/esm-es5/loader.mjs
+++ b/dist/esm-es5/loader.mjs
@@ -1,7 +1,5 @@
-import { a as patchEsm, b as bootstrapLazy } from './index-d8f759a7.js';
-
-const defineCustomElements = (win, options) => patchEsm().then(() => {
- return bootstrapLazy([["hy-baseline",[[4,"hy-baseline"]]],["hy-accordion-container_15",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
-});
-
+import { a as patchEsm, b as bootstrapLazy } from './index-5809f4b1.js';
+var defineCustomElements = function (win, options) { return patchEsm().then(function () {
+ return bootstrapLazy([["hy-baseline", [[4, "hy-baseline"]]], ["hy-accordion-container_15", [[4, "hy-accordion-item", { "accordiontitle": [1], "ready": [32] }], [4, "hy-button", { "variant": [1], "state": [1], "icon": [1], "iconRight": [1, "icon-right"] }], [4, "hy-accordion-container", { "accordionid": [1] }], [4, "hy-docs-container"], [4, "hy-grid-container"], [4, "hy-grid-item", { "columns": [1], "columnssm": [1], "columnslg": [1], "contentalign": [1] }], [4, "hy-grid-row"], [1, "hy-heading", { "heading": [1], "section": [1] }], [1, "hy-ingress"], [1, "hy-link", { "variant": [1], "linkContent": [1, "link-content"], "url": [1], "ariaLabel": [1, "aria-label"], "isExternal": [4, "is-external"] }], [1, "hy-paragraph-text"], [4, "hy-row", { "justify": [1], "align": [1] }], [4, "hy-section-container"], [1, "hy-tiny-text"], [0, "hy-icon", { "icon": [1], "fill": [1], "size": [2] }]]]], options);
+}); };
export { defineCustomElements };
diff --git a/dist/esm/hy-baseline.entry.js b/dist/esm/hy-baseline.entry.js
index abf336a1ca7fbd24f3347e43ea38aee1ce4b6762..e850b07e61c65dc4b539ed606452ce945370af57 100644
--- a/dist/esm/hy-baseline.entry.js
+++ b/dist/esm/hy-baseline.entry.js
@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-d8f759a7.js';
+import { r as registerInstance, h } from './index-5809f4b1.js';
const baselineCss = "div.hy-baseline{display:block;margin-bottom:1rem}div.hy-baseline>*+*{margin-top:1rem}";
diff --git a/dist/esm/loader.mjs b/dist/esm/loader.mjs
index 3859fb525bee1d6e237a89b955e9f1c1c4f8fc17..0c74032e7eb58791a25804760bd3f9061e397877 100644
--- a/dist/esm/loader.mjs
+++ b/dist/esm/loader.mjs
@@ -1,4 +1,4 @@
-import { a as patchEsm, b as bootstrapLazy } from './index-d8f759a7.js';
+import { a as patchEsm, b as bootstrapLazy } from './index-5809f4b1.js';
const defineCustomElements = (win, options) => patchEsm().then(() => {
return bootstrapLazy([["hy-baseline",[[4,"hy-baseline"]]],["hy-accordion-container_15",[[4,"hy-accordion-item",{"accordiontitle":[1],"ready":[32]}],[4,"hy-button",{"variant":[1],"state":[1],"icon":[1],"iconRight":[1,"icon-right"]}],[4,"hy-accordion-container",{"accordionid":[1]}],[4,"hy-docs-container"],[4,"hy-grid-container"],[4,"hy-grid-item",{"columns":[1],"columnssm":[1],"columnslg":[1],"contentalign":[1]}],[4,"hy-grid-row"],[1,"hy-heading",{"heading":[1],"section":[1]}],[1,"hy-ingress"],[1,"hy-link",{"variant":[1],"linkContent":[1,"link-content"],"url":[1],"ariaLabel":[1,"aria-label"],"isExternal":[4,"is-external"]}],[1,"hy-paragraph-text"],[4,"hy-row",{"justify":[1],"align":[1]}],[4,"hy-section-container"],[1,"hy-tiny-text"],[0,"hy-icon",{"icon":[1],"fill":[1],"size":[2]}]]]], options);
diff --git a/src/components/button/readme.md b/src/components/button/readme.md
index ab2bda560bbff60e3c47fbaa8a9337fa77a80462..d90cc6f14df21d3aa629ab4d1e441655fcad8d73 100644
--- a/src/components/button/readme.md
+++ b/src/components/button/readme.md
@@ -12,43 +12,87 @@ Well, it's a button.
### Primary (Default) button
<hy-docs-container>
- <hy-button>Just a plain button</hy-button>
+ <hy-button>Primary</hy-button>
</hy-docs-container>
```
-<hy-button>Just a plain button</hy-button>
+<hy-button>Primary</hy-button>
```
-### With icons
+### Secondary & Transparent
-<hy-docs-container>
-<hy-row>
-<hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
-<hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
-</hy-row>
-</hy-docs-container>
+<hy-button variant="secondary">Secondary</hy-button>
```
-<hy-row>
- <hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
- <hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
-</hy-row>
+<hy-button variant="secondary">Secondary</hy-button>
```
-### Secondary & Outline
+### Primary button, state disabled
+<hy-button state="disabled">Primary</hy-button>
-<hy-docs-container>
-<hy-row>
-<hy-button variant="secondary">I feel secondary and transparent</hy-button>
-</hy-row>
-</hy-docs-container>
```
-<hy-row>
- <hy-button variant="secondary">I feel secondary</hy-button>
- <hy-button variant="outline">I'm actually transparent</hy-button>
-</hy-row>
+<hy-button state="disabled">Primary</hy-button>
+```
+
+### Secondary button, state disabled
+<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
+
+```
+<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
+```
+
+### With arrows, state enabled
+
+<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
+```
+<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
+```
+
+<hy-button variant="secondary" icon="hy-icon-arrow-left">Secondary</hy-button>
```
+<hy-button variant="secondary" icon="hy-icon-arrow-left">
+ Secondary
+</hy-button>
+```
+
+<hy-button icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+<hy-button icon-right="hy-icon-arrow-right">
+ Primary
+</hy-button>
+```
+
+<hy-button icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+<hy-button icon-right="hy-icon-arrow-right" variant="secondary">
+ Secondary
+</hy-button>
+```
+
+
+### With arrows, state disabled
+
+<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
+```
+<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
+```
+
+<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
+```
+<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
+```
+
+<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
+```
+
+<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
+```
+
### Mix with any icon