drab 2.7.0 → 2.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@
3
3
 
4
4
  ### Tabs
5
5
 
6
- Displays tabs and the selected tab's content.
6
+ Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
7
7
 
8
8
  @props
9
9
 
@@ -29,17 +29,17 @@ Displays tabs and the selected tab's content.
29
29
  @example
30
30
 
31
31
  ```svelte
32
- <script>
32
+ <script lang="ts">
33
33
  import { Tabs } from "drab";
34
34
  import { FullscreenButton } from "drab";
35
35
  </script>
36
36
 
37
37
  <Tabs
38
38
  class="mb-4"
39
- classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
40
- classTab="btn btn-s rounded-sm p-1"
41
- classTabActive="bg-white text-neutral-950"
42
- classTabInactive="bg-neutral-200 text-neutral-500"
39
+ classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
40
+ classTab="btn btn-s p-2"
41
+ classTabActive="bg-white text-neutral-950 shadow"
42
+ classTabInactive="bg-neutral-200 text-neutral-600"
43
43
  classTabPanel="py-2"
44
44
  tabs={[
45
45
  { tab: "Tab", panel: "Content" },
@@ -48,10 +48,10 @@ Displays tabs and the selected tab's content.
48
48
  />
49
49
 
50
50
  <Tabs
51
- classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
52
- classTab="btn btn-s rounded-sm p-1"
53
- classTabActive="bg-white text-neutral-950"
54
- classTabInactive="bg-neutral-200 text-neutral-500"
51
+ classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
52
+ classTab="btn btn-s p-2"
53
+ classTabActive="bg-white text-neutral-950 shadow"
54
+ classTabInactive="bg-neutral-200 text-neutral-600"
55
55
  classTabPanel="py-2"
56
56
  tabs={[
57
57
  { tab: "Tab", panel: "Generated indexes" },
@@ -103,6 +103,7 @@ onMount(() => {
103
103
  }
104
104
  clientJs = true;
105
105
  });
106
+ const panelId = "tabPanel-" + Math.random().toString().substring(2, 8);
106
107
  </script>
107
108
 
108
109
  <div class={className} {id}>
@@ -112,7 +113,7 @@ onMount(() => {
112
113
  role="tab"
113
114
  tabindex={index === selectedIndex ? 0 : -1}
114
115
  aria-selected={index === selectedIndex}
115
- aria-controls="tabpanel"
116
+ aria-controls={panelId}
116
117
  disabled={!clientJs}
117
118
  class="{classTab} {selectedIndex === index
118
119
  ? classTabActive
@@ -125,13 +126,10 @@ onMount(() => {
125
126
  </div>
126
127
  {#each tabs as tab, index}
127
128
  {#if index === selectedIndex}
128
- <div
129
- class={classTabPanel}
130
- role="tabpanel"
131
- id="tabpanel"
132
- in:fade={transition ? transition : { duration: 0 }}
133
- >
134
- <slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
129
+ <div class={classTabPanel} role="tabpanel" id={panelId}>
130
+ <div in:fade={transition ? transition : { duration: 0 }}>
131
+ <slot name="panel" selectedTab={tab} {index}>{tab.panel}</slot>
132
+ </div>
135
133
  </div>
136
134
  {/if}
137
135
  {/each}
@@ -42,7 +42,7 @@ export type TabsSlots = typeof __propDef.slots;
42
42
  /**
43
43
  * ### Tabs
44
44
  *
45
- * Displays tabs and the selected tab's content.
45
+ * Displays tabs and the selected tab's content. Use `TabsTab.data` to send additional data through the slot props.
46
46
  *
47
47
  * @props
48
48
  *
@@ -68,17 +68,17 @@ export type TabsSlots = typeof __propDef.slots;
68
68
  * @example
69
69
  *
70
70
  * ```svelte
71
- * <script>
71
+ * <script lang="ts">
72
72
  * import { Tabs } from "drab";
73
73
  * import { FullscreenButton } from "drab";
74
74
  * </script>
75
75
  *
76
76
  * <Tabs
77
77
  * class="mb-4"
78
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
79
- * classTab="btn btn-s rounded-sm p-1"
80
- * classTabActive="bg-white text-neutral-950"
81
- * classTabInactive="bg-neutral-200 text-neutral-500"
78
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
79
+ * classTab="btn btn-s p-2"
80
+ * classTabActive="bg-white text-neutral-950 shadow"
81
+ * classTabInactive="bg-neutral-200 text-neutral-600"
82
82
  * classTabPanel="py-2"
83
83
  * tabs={[
84
84
  * { tab: "Tab", panel: "Content" },
@@ -87,10 +87,10 @@ export type TabsSlots = typeof __propDef.slots;
87
87
  * />
88
88
  *
89
89
  * <Tabs
90
- * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded bg-neutral-200 p-1"
91
- * classTab="btn btn-s rounded-sm p-1"
92
- * classTabActive="bg-white text-neutral-950"
93
- * classTabInactive="bg-neutral-200 text-neutral-500"
90
+ * classTabList="grid grid-flow-col grid-rows-1 gap-1 rounded-md bg-neutral-200 p-1"
91
+ * classTab="btn btn-s p-2"
92
+ * classTabActive="bg-white text-neutral-950 shadow"
93
+ * classTabInactive="bg-neutral-200 text-neutral-600"
94
94
  * classTabPanel="py-2"
95
95
  * tabs={[
96
96
  * { tab: "Tab", panel: "Generated indexes" },
@@ -3,7 +3,7 @@
3
3
 
4
4
  ### YouTube
5
5
 
6
- 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).
6
+ 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).
7
7
 
8
8
  @props
9
9
 
@@ -17,7 +17,7 @@ Embeds a YouTube video into a website with the video `uid`, using [www.youtube-n
17
17
  @example
18
18
 
19
19
  ```svelte
20
- <script>
20
+ <script lang="ts">
21
21
  import { YouTube } from "drab";
22
22
  </script>
23
23
 
@@ -19,7 +19,7 @@ export type YouTubeSlots = typeof __propDef.slots;
19
19
  /**
20
20
  * ### YouTube
21
21
  *
22
- * 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).
22
+ * 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).
23
23
  *
24
24
  * @props
25
25
  *
@@ -33,7 +33,7 @@ export type YouTubeSlots = typeof __propDef.slots;
33
33
  * @example
34
34
  *
35
35
  * ```svelte
36
- * <script>
36
+ * <script lang="ts">
37
37
  * import { YouTube } from "drab";
38
38
  * </script>
39
39
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "2.7.0",
3
+ "version": "2.8.1",
4
4
  "description": "An unstyled Svelte component library",
5
5
  "keywords": [
6
6
  "components",