feat: add a basic storybook

.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.{js,mdx}'],
+};

.storybook/preview.js

@@ -0,0 +1,34 @@
+import {
+  addParameters,
+  addDecorator,
+  setCustomElements,
+  withA11y,
+} from '@open-wc/demoing-storybook';
+
+addDecorator(withA11y);
+
+addParameters({
+  a11y: {
+    config: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    }
+  },
+  docs: {
+    iframeHeight: '400px',
+  },
+  options: {
+    enableShortcuts: false
+  }
+});
+
+async function run() {
+  const customElements = await (
+    await fetch('../custom-elements.json')
+  ).json();
+
+  setCustomElements(customElements);
+}
+
+run();

custom-elements.json

@@ -0,0 +1,41 @@
+{
+	"version": 2,
+	"tags": [
+		{
+			"name": "cosmoz-tabs",
+			"properties": [
+				{
+					"name": "selected",
+					"type": "String",
+					"description": "The name of the selected tab"
+				}
+			],
+			"events": [],
+			"slots": [
+				{
+					"name": "",
+					"description": "cosmoz-tab elements inside cosmoz-tabs get displayed when selected`"
+				}
+			],
+			"cssProperties": []
+		},
+		{
+			"name": "cosmoz-tab",
+			"properties": [
+				{
+					"name": "heading",
+					"type": "String",
+					"description": "The heading"
+				}
+			],
+			"events": [],
+			"slots": [
+				{
+					"name": "",
+					"description": "Content inside the cosmoz-tab"
+				}
+			],
+			"cssProperties": []
+		}
+	]
+}

lib/render.js

@@ -9,6 +9,7 @@ const style = `
 	display: flex;
 	flex-direction: column;
 	font-family: var(--cosmoz-font-base, inherit);
+	font-size: 14px;
 }
 
 .tabs {
@@ -29,7 +30,8 @@ const style = `
 	color: inherit;
 	text-decoration: none;
 	text-align: center;
-	font-size: 1.14em;
+	font-size: 1.14285em;
+	line-height: 1.2;
 	font-weight: 300;
 	text-overflow: ellipsis;
 	white-space: nowrap;