drab 2.7.0 → 2.8.1

package/dist/components/Tabs.svelte

@@ -3,7 +3,7 @@
 
 ### Tabs
 
-Displays tabs and the selected tab's content.
+Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props. 
 
 @props
 
@@ -29,17 +29,17 @@ Displays tabs and the selected tab's content.
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { Tabs } from "drab";
 	import { FullscreenButton } from "drab";
 </script>
 
 <Tabs
 	class="mb-4"
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
-	classTab="btn btn-s rounded-sm p-1"
-	classTabActive="bg-white text-neutral-950"
-	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+	classTab="btn btn-s p-2"
+	classTabActive="bg-white text-neutral-950 shadow"
+	classTabInactive="bg-neutral-200 text-neutral-600"
 	classTabPanel="py-2"
 	tabs={[
 		{ tab: "Tab", panel: "Content" },
@@ -48,10 +48,10 @@ Displays tabs and the selected tab's content.
 />
 
 <Tabs
-	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
-	classTab="btn btn-s rounded-sm p-1"
-	classTabActive="bg-white text-neutral-950"
-	classTabInactive="bg-neutral-200 text-neutral-500"
+	classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+	classTab="btn btn-s p-2"
+	classTabActive="bg-white text-neutral-950 shadow"
+	classTabInactive="bg-neutral-200 text-neutral-600"
 	classTabPanel="py-2"
 	tabs={[
 		{ tab: "Tab", panel: "Generated indexes" },
@@ -103,6 +103,7 @@ onMount(() => {
   }
   clientJs = true;
 });
+const panelId = "tabPanel-" + Math.random().toString().substring(2, 8);
 </script>
 
 <div class={className} {id}>
@@ -112,7 +113,7 @@ onMount(() => {
 				role="tab"
 				tabindex={index === selectedIndex ? 0 : -1}
 				aria-selected={index === selectedIndex}
-				aria-controls="tabpanel"
+				aria-controls={panelId}
 				disabled={!clientJs}
 				class="{classTab} {selectedIndex === index
 					? classTabActive
@@ -125,13 +126,10 @@ onMount(() => {
 	</div>
 	{#each tabs as tab, index}
 		{#if index === selectedIndex}
-			<div
-				class={classTabPanel}
-				role="tabpanel"
-				id="tabpanel"
-				in:fade={transition ? transition : { duration: 0 }}
-			>
-				<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+			<div class={classTabPanel} role="tabpanel" id={panelId}>
+				<div in:fade={transition ? transition : { duration: 0 }}>
+					<slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
+				</div>
 			</div>
 		{/if}
 	{/each}

package/dist/components/Tabs.svelte.d.ts

@@ -42,7 +42,7 @@ export type TabsSlots = typeof __propDef.slots;
 /**
  * ### Tabs
  *
- * Displays tabs and the selected tab's content.
+ * Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
  *
  * @props
  *
@@ -68,17 +68,17 @@ export type TabsSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { Tabs } from "drab";
  * import { FullscreenButton } from "drab";
  * </script>
  *
  * <Tabs
  * class="mb-4"
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
- * classTab="btn btn-s rounded-sm p-1"
- * classTabActive="bg-white text-neutral-950"
- * classTabInactive="bg-neutral-200 text-neutral-500"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+ * classTab="btn btn-s p-2"
+ * classTabActive="bg-white text-neutral-950 shadow"
+ * classTabInactive="bg-neutral-200 text-neutral-600"
  * classTabPanel="py-2"
  * tabs={[
  * 	{ tab: "Tab", panel: "Content" },
@@ -87,10 +87,10 @@ export type TabsSlots = typeof __propDef.slots;
  * />
  *
  * <Tabs
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
- * classTab="btn btn-s rounded-sm p-1"
- * classTabActive="bg-white text-neutral-950"
- * classTabInactive="bg-neutral-200 text-neutral-500"
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
+ * classTab="btn btn-s p-2"
+ * classTabActive="bg-white text-neutral-950 shadow"
+ * classTabInactive="bg-neutral-200 text-neutral-600"
  * classTabPanel="py-2"
  * tabs={[
  * 	{ tab: "Tab", panel: "Generated indexes" },

package/dist/components/YouTube.svelte

@@ -3,7 +3,7 @@
 
 ### YouTube
 
-Embeds a YouTube video into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
 
 @props
 
@@ -17,7 +17,7 @@ Embeds a YouTube video into a website with the video `uid`, using [www.youtube-n
 @example
 
 ```svelte
-<script>
+<script lang="ts">
 	import { YouTube } from "drab";
 </script>
 

package/dist/components/YouTube.svelte.d.ts

@@ -19,7 +19,7 @@ export type YouTubeSlots = typeof __propDef.slots;
 /**
  * ### YouTube
  *
- * Embeds a YouTube video into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
+ * Embeds a YouTube video `iframe` into a website with the video `uid`, using [www.youtube-nocookie.com](https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode).
  *
  * @props
  *
@@ -33,7 +33,7 @@ export type YouTubeSlots = typeof __propDef.slots;
  * @example
  *
  * ```svelte
- * <script>
+ * <script lang="ts">
  * import { YouTube } from "drab";
  * </script>
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "drab",
-	"version": "2.7.0",
+	"version": "2.8.1",
 	"description": "An unstyled Svelte component library",
 	"keywords": [
 		"components",