chore(tabs): document prop types

src/Tabs/Tab.svelte

@@ -1,8 +1,27 @@
 <script>
-  export let disabled = false;
+  /**
-  export let href = "#";
+   * Specify the tab label
+   * Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
+   * @type {string} [label=""]
+   */
   export let label = "";
-  export let role = "presentation";
+
+  /**
+   * Specify the href attribute
+   * @type {string} [href="#"]
+   */
+  export let href = "#";
+
+  /**
+   * Set to `true` to disable the tab
+   * @type {boolean} [disabled=false]
+   */
+  export let disabled = false;
+
+  /**
+   * Specify the tabindex
+   * @type {string} [tabindex="0"]
+   */
   export let tabindex = "0";
 
   /**
@@ -10,6 +29,11 @@
    * @type {string} [id]
    */
   export let id = "ccs-" + Math.random().toString(36);
+
+  /**
+   * Obtain a reference to the anchor HTML element
+   * @type {null | HTMLAnchorElement} [ref=null]
+   */
   export let ref = null;
 
   import { getContext } from "svelte";
@@ -26,7 +50,7 @@
 
 <li
   tabindex="-1"
-  {role}
+  role="presentation"
   {id}
   class:bx--tabs__nav-item={true}
   class:bx--tabs__nav-item--disabled={disabled}
@@ -59,6 +83,6 @@
     aria-disabled={disabled}
     {href}
     class:bx--tabs__nav-link={true}>
-    {label}
+    <slot>{label}</slot>
   </a>
 </li>

src/Tabs/TabContent.svelte

@@ -18,9 +18,7 @@
   aria-hidden={!selected}
   hidden={!selected}
   {id}
-  {...$$restProps}
   class:bx--tab-content={true}
-  class={$$restProps.class}
+  {...$$restProps}>
-  style={$$restProps.style}>
   <slot />
 </div>

src/Tabs/Tabs.svelte

@@ -1,25 +1,42 @@
 <script>
-  export let iconDescription = "Show menu options";
+  /**
-  export let role = "navigation";
+   * Specify the selected tab index
+   * @type {number} [selected=0]
+   */
   export let selected = 0;
-  export let triggerHref = "#";
+
+  /**
+   * Specify the type of tabs
+   * @type {"default" | "container"} [type="default"]
+   */
   export let type = "default";
 
+  /**
+   * Specify the ARIA label for the chevron icon
+   * @type {string} [iconDescription="Expand/Collapse"]
+   */
+  export let iconDescription = "Show menu options";
+
+  /**
+   * Specify the tab trigger href attribute
+   * @type {string} [triggerHref="#"]
+   */
+  export let triggerHref = "#";
+
   import { createEventDispatcher, afterUpdate, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
   import ChevronDownGlyph from "carbon-icons-svelte/lib/ChevronDownGlyph";
 
   const dispatch = createEventDispatcher();
 
-  let dropdownHidden = true;
+  const tabs = writable([]);
-  let tabs = writable([]);
+  const tabsById = derived(tabs, (_) =>
-  let tabsById = derived(tabs, (_) =>
     _.reduce((a, c) => ({ ...a, [c.id]: c }), {})
   );
-  let currentIndex = selected;
+
-  let selectedTab = writable(undefined);
+  const selectedTab = writable(undefined);
-  let content = writable([]);
+  const content = writable([]);
-  let selectedContent = writable(undefined);
+  const selectedContent = writable(undefined);
 
   setContext("Tabs", {
     selectedTab,
@@ -64,6 +81,9 @@
     selected = currentIndex;
   });
 
+  let dropdownHidden = true;
+  let currentIndex = selected;
+
   $: currentIndex = selected;
   $: currentTab = $tabs[currentIndex] || undefined;
   $: currentContent = $content[currentIndex] || undefined;
@@ -84,7 +104,7 @@
 </script>
 
 <div
-  {role}
+  role="navigation"
   class:bx--tabs={true}
   class:bx--tabs--container={type === 'container'}
   {...$$restProps}>