drab 2.2.0 → 2.2.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.
@@ -7,7 +7,7 @@ Displays a list of `details` elements.
7
7
 
8
8
  @props
9
9
 
10
- - `autoClose` - if true, other items close when a new one is opened
10
+ - `autoClose` - if `true`, other items close when a new one is opened
11
11
  - `classDetails` - class of the `div` around each `details` element
12
12
  - `classIcon` - class of the `div` around the icon
13
13
  - `classSlot` - class of all the `slot` elements
@@ -153,6 +153,12 @@ onMount(() => {
153
153
  </div>
154
154
 
155
155
  <style>
156
+ summary {
157
+ list-style: none;
158
+ }
159
+ summary::-webkit-details-marker {
160
+ display: none;
161
+ }
156
162
  .db-rotate-180 {
157
163
  transform: rotate(180deg);
158
164
  }
@@ -26,7 +26,7 @@ declare const __propDef: {
26
26
  /** class of all the `slot` elements */ classSlot?: string | undefined;
27
27
  /** class of the `div` around the icon */ classIcon?: string | undefined;
28
28
  /** rotates the icon, slides the content, defaults to empty object, set to false to remove */ transition?: false | SlideParams | undefined;
29
- /** if true, other items close when a new one is opened */ autoClose?: boolean | undefined;
29
+ /** if `true`, other items close when a new one is opened */ autoClose?: boolean | undefined;
30
30
  };
31
31
  events: {
32
32
  [evt: string]: CustomEvent<any>;
@@ -43,7 +43,7 @@ export type AccordionSlots = typeof __propDef.slots;
43
43
  *
44
44
  * @props
45
45
  *
46
- * - `autoClose` - if true, other items close when a new one is opened
46
+ * - `autoClose` - if `true`, other items close when a new one is opened
47
47
  * - `classDetails` - class of the `div` around each `details` element
48
48
  * - `classIcon` - class of the `div` around the icon
49
49
  * - `classSlot` - class of all the `slot` elements
@@ -7,7 +7,7 @@ Displays when the parent element is right clicked.
7
7
 
8
8
  @props
9
9
 
10
- - `classNoscript` - noscript class
10
+ - `classNoscript` - `noscript` class
11
11
  - `class`
12
12
  - `display` - controls `display` css property
13
13
  - `id`
@@ -25,14 +25,14 @@ Displays when the parent element is right clicked.
25
25
  import { ContextMenu } from "drab";
26
26
  </script>
27
27
 
28
- <div class="p-12 border border-dashed flex justify-center">
28
+ <div>
29
29
  <div>Right click here</div>
30
- <ContextMenu class="rounded shadow p-2 bg-white">
31
- <div class="flex flex-col gap-2 not-prose w-48">
32
- <div class="font-bold">Context Menu</div>
33
- <button class="btn">Button</button>
34
- <button class="btn">Button</button>
35
- <button class="btn">Button</button>
30
+ <ContextMenu>
31
+ <div>
32
+ <div>Context Menu</div>
33
+ <button>Button</button>
34
+ <button>Button</button>
35
+ <button>Button</button>
36
36
  </div>
37
37
  </ContextMenu>
38
38
  </div>
@@ -4,7 +4,7 @@ declare const __propDef: {
4
4
  class?: string | undefined;
5
5
  id?: string | undefined;
6
6
  /** controls `display` css property */ display?: boolean | undefined;
7
- /** noscript class */ classNoscript?: string | undefined;
7
+ /** `noscript` class */ classNoscript?: string | undefined;
8
8
  };
9
9
  events: {
10
10
  [evt: string]: CustomEvent<any>;
@@ -23,7 +23,7 @@ export type ContextMenuSlots = typeof __propDef.slots;
23
23
  *
24
24
  * @props
25
25
  *
26
- * - `classNoscript` - noscript class
26
+ * - `classNoscript` - `noscript` class
27
27
  * - `class`
28
28
  * - `display` - controls `display` css property
29
29
  * - `id`
@@ -41,14 +41,14 @@ export type ContextMenuSlots = typeof __propDef.slots;
41
41
  * import { ContextMenu } from "drab";
42
42
  * </script>
43
43
  *
44
- * <div class="p-12 border border-dashed flex justify-center">
44
+ * <div>
45
45
  * <div>Right click here</div>
46
- * <ContextMenu class="rounded shadow p-2 bg-white">
47
- * <div class="flex flex-col gap-2 not-prose w-48">
48
- * <div class="font-bold">Context Menu</div>
49
- * <button class="btn">Button</button>
50
- * <button class="btn">Button</button>
51
- * <button class="btn">Button</button>
46
+ * <ContextMenu>
47
+ * <div>
48
+ * <div>Context Menu</div>
49
+ * <button>Button</button>
50
+ * <button>Button</button>
51
+ * <button>Button</button>
52
52
  * </div>
53
53
  * </ContextMenu>
54
54
  * </div>
@@ -7,7 +7,7 @@ Uses the navigator api to copy text to the clipboard.
7
7
 
8
8
  @props
9
9
 
10
- - `classNoscript` - noscript class
10
+ - `classNoscript` - `noscript` class
11
11
  - `class`
12
12
  - `id`
13
13
  - `text` - text to copy
@@ -5,7 +5,7 @@ declare const __propDef: {
5
5
  id?: string | undefined;
6
6
  title?: string | undefined;
7
7
  /** text to copy */ text: string;
8
- /** noscript class */ classNoscript?: string | undefined;
8
+ /** `noscript` class */ classNoscript?: string | undefined;
9
9
  };
10
10
  events: {
11
11
  [evt: string]: CustomEvent<any>;
@@ -25,7 +25,7 @@ export type CopyButtonSlots = typeof __propDef.slots;
25
25
  *
26
26
  * @props
27
27
  *
28
- * - `classNoscript` - noscript class
28
+ * - `classNoscript` - `noscript` class
29
29
  * - `class`
30
30
  * - `id`
31
31
  * - `text` - text to copy
@@ -8,24 +8,24 @@ Data table to display an array of JS objects. Click a column header to sort.
8
8
  @props
9
9
 
10
10
  - `ascending` - default sort order
11
- - `classButton` - button class
12
- - `classFooter` - footer class
13
- - `classNoscript` - noscript class
11
+ - `classButton` - `button` class
12
+ - `classFooter` - `footer` class
13
+ - `classNoscript` - `noscript` class
14
14
  - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
15
15
  - `classPageNumber` - class of `div` wrapping page numbers
16
- - `classTable` - table class
17
- - `classTbodyTr` - tbody tr class
18
- - `classTbody` - tbody class
19
- - `classTdSorted` - currently sorted td
20
- - `classTd` - td class
21
- - `classThSorted` - currently sorted th
22
- - `classTh` - th class
23
- - `classTheadTr` - thead tr class
24
- - `classThead` - thead class
16
+ - `classTable` - `table` class
17
+ - `classTbodyTr` - `tbody tr` class
18
+ - `classTbody` - `tbody` class
19
+ - `classTdSorted` - currently sorted `td`
20
+ - `classTd` - `td` class
21
+ - `classThSorted` - currently sorted `th`
22
+ - `classTh` - `th` class
23
+ - `classTheadTr` - `thead tr` class
24
+ - `classThead` - `thead` class
25
25
  - `columns` - table columns, in order
26
26
  - `currentPage` - current page, defaults to `1`
27
27
  - `data` - a list of objects to render in the table
28
- - `idTable` - table id
28
+ - `idTable` - `table` id
29
29
  - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
30
30
  - `sortBy` - column to sort by--defaults to first column
31
31
 
@@ -8,23 +8,23 @@ declare const __propDef: {
8
8
  /** table columns, in order */ columns?: string[] | undefined;
9
9
  /** column to sort by--defaults to first column */ sortBy?: string | undefined;
10
10
  /** default sort order */ ascending?: boolean | undefined;
11
- /** table class */ classTable?: string | undefined;
12
- /** table id */ idTable?: string | undefined;
13
- /** thead class */ classThead?: string | undefined;
14
- /** tbody class */ classTbody?: string | undefined;
15
- /** thead tr class */ classTheadTr?: string | undefined;
16
- /** tbody tr class */ classTbodyTr?: string | undefined;
17
- /** th class */ classTh?: string | undefined;
18
- /** td class */ classTd?: string | undefined;
19
- /** currently sorted th */ classThSorted?: string | undefined;
20
- /** currently sorted td */ classTdSorted?: string | undefined;
21
- /** button class */ classButton?: string | undefined;
22
- /** footer class */ classFooter?: string | undefined;
11
+ /** `table` class */ classTable?: string | undefined;
12
+ /** `table` id */ idTable?: string | undefined;
13
+ /** `thead` class */ classThead?: string | undefined;
14
+ /** `tbody` class */ classTbody?: string | undefined;
15
+ /** `thead tr` class */ classTheadTr?: string | undefined;
16
+ /** `tbody tr` class */ classTbodyTr?: string | undefined;
17
+ /** `th` class */ classTh?: string | undefined;
18
+ /** `td` class */ classTd?: string | undefined;
19
+ /** currently sorted `th` */ classThSorted?: string | undefined;
20
+ /** currently sorted `td` */ classTdSorted?: string | undefined;
21
+ /** `button` class */ classButton?: string | undefined;
22
+ /** `footer` class */ classFooter?: string | undefined;
23
23
  /** class of `div` wrapping page numbers */ classPageNumber?: string | undefined;
24
24
  /** class of `div` that wraps the "Previous" and "Next" buttons */ classPageControls?: string | undefined;
25
25
  /** number of rows to show on each page, defaults to `0` - no pagination */ paginate?: number | undefined;
26
26
  /** current page, defaults to `1` */ currentPage?: number | undefined;
27
- /** noscript class */ classNoscript?: string | undefined;
27
+ /** `noscript` class */ classNoscript?: string | undefined;
28
28
  };
29
29
  events: {
30
30
  [evt: string]: CustomEvent<any>;
@@ -45,24 +45,24 @@ export type DataTableSlots = typeof __propDef.slots;
45
45
  * @props
46
46
  *
47
47
  * - `ascending` - default sort order
48
- * - `classButton` - button class
49
- * - `classFooter` - footer class
50
- * - `classNoscript` - noscript class
48
+ * - `classButton` - `button` class
49
+ * - `classFooter` - `footer` class
50
+ * - `classNoscript` - `noscript` class
51
51
  * - `classPageControls` - class of `div` that wraps the "Previous" and "Next" buttons
52
52
  * - `classPageNumber` - class of `div` wrapping page numbers
53
- * - `classTable` - table class
54
- * - `classTbodyTr` - tbody tr class
55
- * - `classTbody` - tbody class
56
- * - `classTdSorted` - currently sorted td
57
- * - `classTd` - td class
58
- * - `classThSorted` - currently sorted th
59
- * - `classTh` - th class
60
- * - `classTheadTr` - thead tr class
61
- * - `classThead` - thead class
53
+ * - `classTable` - `table` class
54
+ * - `classTbodyTr` - `tbody tr` class
55
+ * - `classTbody` - `tbody` class
56
+ * - `classTdSorted` - currently sorted `td`
57
+ * - `classTd` - `td` class
58
+ * - `classThSorted` - currently sorted `th`
59
+ * - `classTh` - `th` class
60
+ * - `classTheadTr` - `thead tr` class
61
+ * - `classThead` - `thead` class
62
62
  * - `columns` - table columns, in order
63
63
  * - `currentPage` - current page, defaults to `1`
64
64
  * - `data` - a list of objects to render in the table
65
- * - `idTable` - table id
65
+ * - `idTable` - `table` id
66
66
  * - `paginate` - number of rows to show on each page, defaults to `0` - no pagination
67
67
  * - `sortBy` - column to sort by--defaults to first column
68
68
  *
@@ -9,9 +9,9 @@ Text editor with controls to add elements and keyboard shortcuts.
9
9
 
10
10
  - `classButton` - `class` of all the `button` elements
11
11
  - `classControls` - `class` of the `div` that wraps the controls
12
- - `classNoscript` - noscript class
12
+ - `classNoscript` - `noscript` class
13
13
  - `classTextarea` - `class` of the `textarea` element
14
- - `contentElements` - an array of content elements for the controls
14
+ - `contentElements` - an array of `EditorContentElement`s for the controls
15
15
  - `idControls` - `id` of the `div` that wraps the controls
16
16
  - `idTextarea` - `id` of the `textarea` element
17
17
  - `keyPairs` - keys that will auto-close if typed, value is their closing character
@@ -12,16 +12,16 @@ export interface EditorContentElement {
12
12
  text: string;
13
13
  /** controls how the text is added */
14
14
  display: "inline" | "block" | "wrap";
15
- /** contents of the button */
15
+ /** contents of the `button` */
16
16
  icon: string | ComponentType;
17
17
  /** keyboard shortcut */
18
18
  key?: string;
19
- /** class to apply to the specific button */
19
+ /** class to apply to the specific `button` */
20
20
  class?: string;
21
21
  }
22
22
  declare const __propDef: {
23
23
  props: {
24
- /** an array of content elements for the controls */ contentElements?: EditorContentElement[] | undefined;
24
+ /** an array of `EditorContentElement`s for the controls */ contentElements?: EditorContentElement[] | undefined;
25
25
  /** `value` of the `textarea` element */ valueTextarea?: string | undefined;
26
26
  /** `placeholder` of the `textarea` element */ placeholderTextarea?: string | undefined;
27
27
  /** `class` of the `textarea` element */ classTextarea?: string | undefined;
@@ -34,7 +34,7 @@ declare const __propDef: {
34
34
  /** keys that will auto-close if typed, value is their closing character */ keyPairs?: {
35
35
  [key: string]: string;
36
36
  } | undefined;
37
- /** noscript class */ classNoscript?: string | undefined;
37
+ /** `noscript` class */ classNoscript?: string | undefined;
38
38
  };
39
39
  events: {
40
40
  input: Event;
@@ -55,9 +55,9 @@ export type EditorSlots = typeof __propDef.slots;
55
55
  *
56
56
  * - `classButton` - `class` of all the `button` elements
57
57
  * - `classControls` - `class` of the `div` that wraps the controls
58
- * - `classNoscript` - noscript class
58
+ * - `classNoscript` - `noscript` class
59
59
  * - `classTextarea` - `class` of the `textarea` element
60
- * - `contentElements` - an array of content elements for the controls
60
+ * - `contentElements` - an array of `EditorContentElement`s for the controls
61
61
  * - `idControls` - `id` of the `div` that wraps the controls
62
62
  * - `idTextarea` - `id` of the `textarea` element
63
63
  * - `keyPairs` - keys that will auto-close if typed, value is their closing character
@@ -7,7 +7,7 @@ Make the document or a specific element fullscreen.
7
7
 
8
8
  @props
9
9
 
10
- - `classNoscript` - noscript class
10
+ - `classNoscript` - `noscript` class
11
11
  - `class`
12
12
  - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
13
13
  - `id`
@@ -6,7 +6,7 @@ declare const __propDef: {
6
6
  title?: string | undefined;
7
7
  /** element to make fullscreen (defaults to `document.documentElement` upon mount) */ targetElement?: HTMLElement | null | undefined;
8
8
  /** message to display in the `confirm` popup, set this to empty string `""` to disable `confirm` */ confirmMessage?: string | undefined;
9
- /** noscript class */ classNoscript?: string | undefined;
9
+ /** `noscript` class */ classNoscript?: string | undefined;
10
10
  };
11
11
  events: {
12
12
  [evt: string]: CustomEvent<any>;
@@ -26,7 +26,7 @@ export type FullscreenButtonSlots = typeof __propDef.slots;
26
26
  *
27
27
  * @props
28
28
  *
29
- * - `classNoscript` - noscript class
29
+ * - `classNoscript` - `noscript` class
30
30
  * - `class`
31
31
  * - `confirmMessage` - message to display in the `confirm` popup, set this to empty string `""` to disable `confirm`
32
32
  * - `id`
@@ -7,12 +7,12 @@ Displays a popover relatively positioned to the button.
7
7
 
8
8
  @props
9
9
 
10
- - `classButton` - button class
10
+ - `classButton` - `button` class
11
11
  - `classPopover` - popover class
12
12
  - `class`
13
13
  - `display` - if `eventType="click"`, controls the display
14
14
  - `eventType` - controls if hovering or clicking the button displays the popover
15
- - `idButton` - button id
15
+ - `idButton` - `button` id
16
16
  - `idPopover` - popover id
17
17
  - `id`
18
18
  - `position` - where the popover is displayed in relation to the button
@@ -3,9 +3,9 @@ declare const __propDef: {
3
3
  props: {
4
4
  class?: string | undefined;
5
5
  id?: string | undefined;
6
- /** button class */ classButton?: string | undefined;
6
+ /** `button` class */ classButton?: string | undefined;
7
7
  /** popover class */ classPopover?: string | undefined;
8
- /** button id */ idButton?: string | undefined;
8
+ /** `button` id */ idButton?: string | undefined;
9
9
  /** popover id */ idPopover?: string | undefined;
10
10
  /** if `eventType="click"`, controls the display */ display?: boolean | undefined;
11
11
  /** where the popover is displayed in relation to the button */ position?: "top" | "bottom" | "left" | "right" | undefined;
@@ -29,12 +29,12 @@ export type PopoverSlots = typeof __propDef.slots;
29
29
  *
30
30
  * @props
31
31
  *
32
- * - `classButton` - button class
32
+ * - `classButton` - `button` class
33
33
  * - `classPopover` - popover class
34
34
  * - `class`
35
35
  * - `display` - if `eventType="click"`, controls the display
36
36
  * - `eventType` - controls if hovering or clicking the button displays the popover
37
- * - `idButton` - button id
37
+ * - `idButton` - `button` id
38
38
  * - `idPopover` - popover id
39
39
  * - `id`
40
40
  * - `position` - where the popover is displayed in relation to the button
@@ -7,11 +7,11 @@ Uses the navigator api to share or copy a url link depending on browser support.
7
7
 
8
8
  @props
9
9
 
10
- - `classNoscript` - noscript class
10
+ - `classNoscript` - `noscript` class
11
11
  - `class`
12
12
  - `id`
13
13
  - `text` - prefixed text in share message
14
- - `title` - title of share message and button attribute, defaults to end of url
14
+ - `title` - title of share message and `button` attribute, defaults to end of url
15
15
  - `url` - url to be shared
16
16
 
17
17
  @slots
@@ -5,8 +5,8 @@ declare const __propDef: {
5
5
  id?: string | undefined;
6
6
  /** prefixed text in share message */ text?: string | undefined;
7
7
  /** url to be shared */ url: string;
8
- /** title of share message and button attribute, defaults to end of url */ title?: string | undefined;
9
- /** noscript class */ classNoscript?: string | undefined;
8
+ /** title of share message and `button` attribute, defaults to end of url */ title?: string | undefined;
9
+ /** `noscript` class */ classNoscript?: string | undefined;
10
10
  };
11
11
  events: {
12
12
  [evt: string]: CustomEvent<any>;
@@ -26,11 +26,11 @@ export type ShareButtonSlots = typeof __propDef.slots;
26
26
  *
27
27
  * @props
28
28
  *
29
- * - `classNoscript` - noscript class
29
+ * - `classNoscript` - `noscript` class
30
30
  * - `class`
31
31
  * - `id`
32
32
  * - `text` - prefixed text in share message
33
- * - `title` - title of share message and button attribute, defaults to end of url
33
+ * - `title` - title of share message and `button` attribute, defaults to end of url
34
34
  * - `url` - url to be shared
35
35
  *
36
36
  * @slots
@@ -0,0 +1,102 @@
1
+ <!--
2
+ @component
3
+
4
+ ### Tabs
5
+
6
+ Displays tabs and slotted content.
7
+
8
+ @props
9
+
10
+ - `classButtonActive` - class of the active tab's `button`
11
+ - `classButtonInactive` - class of all the inactive tabs' `button`s
12
+ - `classButton` - `button` class
13
+ - `classHeader` - class of the `div` that wraps the `button`s
14
+ - `classNoscript` - `noscript` class
15
+ - `classSlot` - class of `div` that wraps the slotted content
16
+ - `class`
17
+ - `content` - array of `TabContent` elements
18
+ - `id`
19
+ - `transition` - fades the content in, defaults to empty object, set to false to remove
20
+
21
+ @slots
22
+
23
+ Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
24
+
25
+ @example
26
+
27
+ ```svelte
28
+ <script>
29
+ import { Tabs } from "drab";
30
+ import { FullscreenButton } from "drab";
31
+ </script>
32
+
33
+ <Tabs content={[
34
+ { name: "String", slot: "Slot" },
35
+ { name: "Component", slot: FullscreenButton },
36
+ ]}
37
+ />
38
+ ```
39
+ -->
40
+
41
+ <script context="module"></script>
42
+
43
+ <script>import { onMount } from "svelte";
44
+ import { fade } from "svelte/transition";
45
+ import { messageNoScript } from "../util/messages";
46
+ let className = "";
47
+ export { className as class };
48
+ export let id = "";
49
+ export let classHeader = "";
50
+ export let classButton = "";
51
+ export let classButtonActive = "";
52
+ export let classButtonInactive = "";
53
+ export let classNoscript = "";
54
+ export let classSlot = "";
55
+ export let content;
56
+ export let transition = {};
57
+ const fadeTransition = transition ? transition : { duration: 0 };
58
+ let clientJs = false;
59
+ let activeIndex = 0;
60
+ for (const item of content) {
61
+ if (!item.classContentSlot)
62
+ item.classContentSlot = "";
63
+ }
64
+ $:
65
+ activeTab = content[activeIndex];
66
+ onMount(() => clientJs = true);
67
+ </script>
68
+
69
+ <div class={className} {id}>
70
+ <div class={classHeader}>
71
+ {#each content as { name }, i}
72
+ <button
73
+ disabled={!clientJs}
74
+ class="{classButton} {activeIndex === i
75
+ ? classButtonActive
76
+ : ''} {activeIndex !== i ? classButtonInactive : ''}"
77
+ on:click={() => (activeIndex = i)}
78
+ >
79
+ {name}
80
+ </button>
81
+ {/each}
82
+ </div>
83
+ <div class={classSlot}>
84
+ {#if typeof activeTab.slot !== "string"}
85
+ <div in:fade={fadeTransition}>
86
+ <svelte:component
87
+ this={activeTab.slot}
88
+ class={activeTab.classContentSlot}
89
+ />
90
+ </div>
91
+ {:else}
92
+ <div in:fade={fadeTransition} class={activeTab.classContentSlot}>
93
+ {activeTab.slot}
94
+ </div>
95
+ {/if}
96
+ </div>
97
+ <noscript>
98
+ <div class={classNoscript}>
99
+ {messageNoScript}
100
+ </div>
101
+ </noscript>
102
+ </div>
@@ -0,0 +1,72 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import type { ComponentType } from "svelte";
3
+ export interface TabsContent {
4
+ /** tab name, displayed in `button` element */
5
+ name: string;
6
+ /** slotted content, displayed once tab is clicked */
7
+ slot: string | ComponentType;
8
+ /** class of the slotted content */
9
+ classContentSlot?: string;
10
+ }
11
+ import { type FadeParams } from "svelte/transition";
12
+ declare const __propDef: {
13
+ props: {
14
+ class?: string | undefined;
15
+ id?: string | undefined;
16
+ /** class of the `div` that wraps the `button`s */ classHeader?: string | undefined;
17
+ /** `button` class */ classButton?: string | undefined;
18
+ /** class of the active tab's `button` */ classButtonActive?: string | undefined;
19
+ /** class of all the inactive tabs' `button`s */ classButtonInactive?: string | undefined;
20
+ /** `noscript` class */ classNoscript?: string | undefined;
21
+ /** class of `div` that wraps the slotted content */ classSlot?: string | undefined;
22
+ /** array of `TabContent` elements */ content: TabsContent[];
23
+ /** fades the content in, defaults to empty object, set to false to remove */ transition?: false | FadeParams | undefined;
24
+ };
25
+ events: {
26
+ [evt: string]: CustomEvent<any>;
27
+ };
28
+ slots: {};
29
+ };
30
+ export type TabsProps = typeof __propDef.props;
31
+ export type TabsEvents = typeof __propDef.events;
32
+ export type TabsSlots = typeof __propDef.slots;
33
+ /**
34
+ * ### Tabs
35
+ *
36
+ * Displays tabs and slotted content.
37
+ *
38
+ * @props
39
+ *
40
+ * - `classButtonActive` - class of the active tab's `button`
41
+ * - `classButtonInactive` - class of all the inactive tabs' `button`s
42
+ * - `classButton` - `button` class
43
+ * - `classHeader` - class of the `div` that wraps the `button`s
44
+ * - `classNoscript` - `noscript` class
45
+ * - `classSlot` - class of `div` that wraps the slotted content
46
+ * - `class`
47
+ * - `content` - array of `TabContent` elements
48
+ * - `id`
49
+ * - `transition` - fades the content in, defaults to empty object, set to false to remove
50
+ *
51
+ * @slots
52
+ *
53
+ * Pass components into the `content` prop if needed. `TabsContent` has a `slot` attribute of type `string | ComponentType`.
54
+ *
55
+ * @example
56
+ *
57
+ * ```svelte
58
+ * <script>
59
+ * import { Tabs } from "drab";
60
+ * import { FullscreenButton } from "drab";
61
+ * </script>
62
+ *
63
+ * <Tabs content={[
64
+ * { name: "String", slot: "Slot" },
65
+ * { name: "Component", slot: FullscreenButton },
66
+ * ]}
67
+ * />
68
+ * ```
69
+ */
70
+ export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
71
+ }
72
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "2.2.0",
3
+ "version": "2.2.1",
4
4
  "description": "An unstyled Svelte component library",
5
5
  "keywords": [
6
6
  "components",