drab 2.6.0 → 2.7.0

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.
@@ -11,9 +11,8 @@ Creates a sheet element based on the `position` provided.
11
11
  - `class`
12
12
  - `display` - controls whether the sheet is displayed
13
13
  - `id`
14
- - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
14
+ - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
15
15
  - `position` - determines the position of sheet
16
- - `size` - size of sheet based on position - can also use css instead
17
16
  - `transitionSheet` - slides the sheet, set to `false` to remove
18
17
  - `transition` - fades the entire component, set to `false` to remove
19
18
 
@@ -33,17 +32,21 @@ Creates a sheet element based on the `position` provided.
33
32
  </script>
34
33
 
35
34
  <div>
36
- <button class="btn" on:click={() => (display = true)}>Open</button>
35
+ <button type="button" class="btn" on:click={() => (display = true)}>
36
+ Open
37
+ </button>
37
38
  </div>
38
39
 
39
40
  <Sheet
40
41
  bind:display
41
- class="bg-gray-50/80 backdrop-blur"
42
+ class="bg-neutral-50/80 backdrop-blur"
42
43
  classSheet="p-4 shadow bg-white"
43
44
  >
44
45
  <div class="mb-4 flex items-center justify-between">
45
- <div class="text-lg font-bold">Sheet</div>
46
- <button class="btn" on:click={() => (display = false)}>Close</button>
46
+ <h2 class="my-0">Sheet</h2>
47
+ <button type="button" class="btn btn-s" on:click={() => (display = false)}>
48
+ Close
49
+ </button>
47
50
  </div>
48
51
  <div>
49
52
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -70,15 +73,9 @@ export let classSheet = "";
70
73
  export let display = false;
71
74
  export let transition = { duration };
72
75
  export let position = "right";
73
- export let size = 488;
76
+ export let maxSize = 488;
74
77
  export let transitionSheet = { duration };
75
- export let onClickClose = false;
76
78
  let sheet;
77
- const clickOutside = (e) => {
78
- if (e.target instanceof Node && !sheet.contains(e.target) || onClickClose) {
79
- display = false;
80
- }
81
- };
82
79
  const onKeyDown = (e) => {
83
80
  if (e.key === "Escape") {
84
81
  display = false;
@@ -86,13 +83,13 @@ const onKeyDown = (e) => {
86
83
  };
87
84
  if (transitionSheet && !transitionSheet.x && !transitionSheet.y) {
88
85
  if (position === "bottom") {
89
- transitionSheet.y = size;
86
+ transitionSheet.y = maxSize;
90
87
  } else if (position === "top") {
91
- transitionSheet.y = -size;
88
+ transitionSheet.y = -maxSize;
92
89
  } else if (position === "right") {
93
- transitionSheet.x = size;
90
+ transitionSheet.x = maxSize;
94
91
  } else {
95
- transitionSheet.x = -size;
92
+ transitionSheet.x = -maxSize;
96
93
  }
97
94
  }
98
95
  onMount(() => {
@@ -109,59 +106,71 @@ onMount(() => {
109
106
 
110
107
  {#if display}
111
108
  <div
112
- role="button"
113
- tabindex="0"
114
- on:click={clickOutside}
115
- on:keydown={onKeyDown}
116
109
  transition:fade={transition ? transition : { duration: 0 }}
117
110
  class="d-backdrop {className}"
111
+ class:d-backdrop-bottom={position === "bottom"}
112
+ class:d-backdrop-top={position === "top"}
113
+ class:d-backdrop-right={position === "right"}
118
114
  {id}
119
115
  >
120
116
  <div
117
+ role="dialog"
121
118
  bind:this={sheet}
122
119
  transition:fly={transitionSheet ? transitionSheet : { duration: 0 }}
123
120
  style={position === "top" || position === "bottom"
124
- ? `max-height: ${size}px;`
125
- : `max-width: ${size}px`}
121
+ ? `max-height: ${maxSize}px;`
122
+ : `max-width: ${maxSize}px`}
126
123
  class="d-sheet {classSheet}"
127
- class:d-bottom={position === "bottom"}
128
- class:d-top={position === "top"}
129
- class:d-left={position === "left"}
130
- class:d-right={position === "right"}
124
+ class:d-sheet-bottom={position === "bottom"}
125
+ class:d-sheet-top={position === "top"}
126
+ class:d-sheet-left={position === "left"}
127
+ class:d-sheet-right={position === "right"}
131
128
  >
132
129
  <slot>Content</slot>
133
130
  </div>
131
+ <button title="Close" on:click={() => (display = false)}></button>
134
132
  </div>
135
133
  {/if}
136
134
 
137
135
  <style>
136
+ button {
137
+ flex-grow: 1;
138
+ }
138
139
  .d-backdrop {
139
140
  position: fixed;
140
- display: grid;
141
- z-index: 10;
141
+ display: flex;
142
+ z-index: 40;
142
143
  top: 0;
143
144
  bottom: 0;
144
145
  left: 0;
145
146
  right: 0;
146
147
  overflow: hidden;
147
- cursor: default;
148
+ }
149
+ .d-backdrop-bottom {
150
+ flex-direction: column-reverse;
151
+ }
152
+ .d-backdrop-top {
153
+ flex-direction: column;
154
+ }
155
+ .d-backdrop-right {
156
+ flex-direction: row-reverse;
148
157
  }
149
158
  .d-sheet {
150
159
  margin: auto;
151
160
  }
152
- .d-bottom {
161
+ .d-sheet-bottom {
153
162
  margin-bottom: 0;
154
163
  width: 100%;
155
164
  }
156
- .d-top {
165
+ .d-sheet-top {
157
166
  margin-top: 0;
158
167
  width: 100%;
159
168
  }
160
- .d-right {
169
+ .d-sheet-right {
161
170
  margin-right: 0;
162
171
  height: 100%;
163
172
  }
164
- .d-left {
173
+ .d-sheet-left {
165
174
  margin-left: 0;
166
175
  height: 100%;
167
176
  }
@@ -8,9 +8,8 @@ declare const __propDef: {
8
8
  /** controls whether the sheet is displayed*/ display?: boolean | undefined;
9
9
  /** fades the entire component, set to `false` to remove */ transition?: false | FadeParams | undefined;
10
10
  /** determines the position of sheet */ position?: "top" | "bottom" | "left" | "right" | undefined;
11
- /** size of sheet based on position - can also use css instead */ size?: number | undefined;
11
+ /** max width/height of sheet based on the `side` - can also use css instead */ maxSize?: number | undefined;
12
12
  /** slides the sheet, set to `false` to remove */ transitionSheet?: false | FlyParams | undefined;
13
- /** close on click, defaults to `false` - only closes if clicked outside */ onClickClose?: boolean | undefined;
14
13
  };
15
14
  events: {
16
15
  [evt: string]: CustomEvent<any>;
@@ -33,9 +32,8 @@ export type SheetSlots = typeof __propDef.slots;
33
32
  * - `class`
34
33
  * - `display` - controls whether the sheet is displayed
35
34
  * - `id`
36
- * - `onClickClose` - close on click, defaults to `false` - only closes if clicked outside
35
+ * - `maxSize` - max width/height of sheet based on the `side` - can also use css instead
37
36
  * - `position` - determines the position of sheet
38
- * - `size` - size of sheet based on position - can also use css instead
39
37
  * - `transitionSheet` - slides the sheet, set to `false` to remove
40
38
  * - `transition` - fades the entire component, set to `false` to remove
41
39
  *
@@ -55,17 +53,21 @@ export type SheetSlots = typeof __propDef.slots;
55
53
  * </script>
56
54
  *
57
55
  * <div>
58
- * <button class="btn" on:click={() => (display = true)}>Open</button>
56
+ * <button type="button" class="btn" on:click={() => (display = true)}>
57
+ * Open
58
+ * </button>
59
59
  * </div>
60
60
  *
61
61
  * <Sheet
62
62
  * bind:display
63
- * class="bg-gray-50/80 backdrop-blur"
63
+ * class="bg-neutral-50/80 backdrop-blur"
64
64
  * classSheet="p-4 shadow bg-white"
65
65
  * >
66
66
  * <div class="mb-4 flex items-center justify-between">
67
- * <div class="text-lg font-bold">Sheet</div>
68
- * <button class="btn" on:click={() => (display = false)}>Close</button>
67
+ * <h2 class="my-0">Sheet</h2>
68
+ * <button type="button" class="btn btn-s" on:click={() => (display = false)}>
69
+ * Close
70
+ * </button>
69
71
  * </div>
70
72
  * <div>
71
73
  * Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -3,27 +3,28 @@
3
3
 
4
4
  ### Tabs
5
5
 
6
- Displays tabs and the active tab's content.
6
+ Displays tabs and the selected tab's content.
7
7
 
8
8
  @props
9
9
 
10
- - `activeIndex` - index of active tab, defaults to 0
11
- - `classContent` - class of `div` that wraps the slotted content
12
- - `classHeader` - class of the `div` that wraps the `button`s
13
10
  - `classNoscript` - `noscript` class
14
- - `classTitleActive` - class of the active tab's `button`
15
- - `classTitleInactive` - class of all the inactive tabs' `button`s
16
- - `classTitle` - class of all title `button`s
11
+ - `classTabActive` - class of the active tab's `button`
12
+ - `classTabInactive` - class of all the inactive tabs' `button`s
13
+ - `classTabList` - class of the `div` that wraps the `button`s
14
+ - `classTabPanel` - class of `div` that wraps the slotted content
15
+ - `classTab` - class of all title `button`s
17
16
  - `class`
18
17
  - `id`
19
- - `tabs` - array of tabs
18
+ - `selectedIndex` - index of selected tab, defaults to `0`
19
+ - `tabs` - array of `TabsTab` objects
20
+ - `transition` - fades the panel content, set to `false` to remove
20
21
 
21
22
  @slots
22
23
 
23
- | name | purpose | default value | slot props |
24
- | --------- | --------------------- | -------------------- | --------------- |
25
- | `default` | active item's content | `activeItem.content` | `activeItem` |
26
- | `title` | title of each tab | `item.title` | `item`, `index` |
24
+ | name | purpose | default value | slot props |
25
+ | ------- | ------------------ | ------------------- | ---------------------- |
26
+ | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
27
+ | `tab` | title of each tab | `tab.tab` | `tab`, `index` |
27
28
 
28
29
  @example
29
30
 
@@ -34,41 +35,43 @@ Displays tabs and the active tab's content.
34
35
  </script>
35
36
 
36
37
  <Tabs
37
- classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
38
- classTitle="btn rounded-sm p-0.5"
39
- classTitleActive="bg-white text-gray-950"
40
- classTitleInactive="bg-gray-200 text-gray-500"
41
- classContent="py-2"
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"
43
+ classTabPanel="py-2"
42
44
  tabs={[
43
- { title: "Tab 1", content: "Content 1" },
44
- { title: "Tab 2", content: "Content 2" },
45
+ { tab: "Tab", panel: "Content" },
46
+ { tab: "Another Tab", panel: "Some more content" },
45
47
  ]}
46
48
  />
47
49
 
48
50
  <Tabs
49
- classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
50
- classTitle="btn rounded-sm p-0.5"
51
- classTitleActive="bg-white text-gray-950"
52
- classTitleInactive="bg-gray-200 text-gray-500"
53
- classContent="py-2"
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"
55
+ classTabPanel="py-2"
54
56
  tabs={[
55
- { title: "Tab", content: "Generated indexes" },
57
+ { tab: "Tab", panel: "Generated indexes" },
56
58
  {
57
- title: "Tab",
58
- content: "A tab with a component",
59
+ tab: "Tab",
60
+ panel: "A tab with a component",
59
61
  data: { component: FullscreenButton },
60
62
  },
61
63
  ]}
62
- let:activeTab
63
64
  >
64
- <svelte:fragment slot="title" let:item let:index>
65
- {item.title}
65
+ <svelte:fragment slot="tab" let:tab let:index>
66
+ {tab.tab}
66
67
  {index + 1}
67
68
  </svelte:fragment>
68
- <div>{activeTab.content}</div>
69
- {#if activeTab.data?.component}
70
- <svelte:component this={activeTab.data.component} class="btn" />
71
- {/if}
69
+ <svelte:fragment slot="panel" let:selectedTab>
70
+ <div class="mb-2">{selectedTab.panel}</div>
71
+ {#if selectedTab.data?.component}
72
+ <svelte:component this={selectedTab.data.component} class="btn" />
73
+ {/if}
74
+ </svelte:fragment>
72
75
  </Tabs>
73
76
  ```
74
77
  -->
@@ -77,40 +80,61 @@ Displays tabs and the active tab's content.
77
80
 
78
81
  <script>import { onMount } from "svelte";
79
82
  import { messageNoScript } from "../util/messages";
83
+ import { fade } from "svelte/transition";
84
+ import { duration } from "../util/transition";
85
+ import { prefersReducedMotion } from "../util/accessibility";
80
86
  let className = "";
81
87
  export { className as class };
82
88
  export let id = "";
83
- export let classHeader = "";
84
- export let classTitle = "";
85
- export let classTitleActive = "";
86
- export let classTitleInactive = "";
89
+ export let classTabList = "";
90
+ export let classTab = "";
91
+ export let classTabActive = "";
92
+ export let classTabInactive = "";
87
93
  export let classNoscript = "";
88
- export let classContent = "";
94
+ export let classTabPanel = "";
89
95
  export let tabs;
90
- export let activeIndex = 0;
96
+ export let selectedIndex = 0;
97
+ export let transition = { duration };
91
98
  let clientJs = false;
92
- $:
93
- activeTab = tabs[activeIndex];
94
- onMount(() => clientJs = true);
99
+ onMount(() => {
100
+ if (prefersReducedMotion()) {
101
+ if (transition)
102
+ transition.duration = 0;
103
+ }
104
+ clientJs = true;
105
+ });
95
106
  </script>
96
107
 
97
108
  <div class={className} {id}>
98
- <div class={classHeader}>
99
- {#each tabs as item, index}
109
+ <div class={classTabList} role="tablist">
110
+ {#each tabs as tab, index}
100
111
  <button
112
+ role="tab"
113
+ tabindex={index === selectedIndex ? 0 : -1}
114
+ aria-selected={index === selectedIndex}
115
+ aria-controls="tabpanel"
101
116
  disabled={!clientJs}
102
- class="{classTitle} {activeIndex === index
103
- ? classTitleActive
104
- : ''} {activeIndex !== index ? classTitleInactive : ''}"
105
- on:click={() => (activeIndex = index)}
117
+ class="{classTab} {selectedIndex === index
118
+ ? classTabActive
119
+ : ''} {selectedIndex !== index ? classTabInactive : ''}"
120
+ on:click={() => (selectedIndex = index)}
106
121
  >
107
- <slot name="title" {item} {index}>{item.title}</slot>
122
+ <slot name="tab" {tab} {index}>{tab.tab}</slot>
108
123
  </button>
109
124
  {/each}
110
125
  </div>
111
- <div class={classContent}>
112
- <slot {activeTab}>{activeTab.content}</slot>
113
- </div>
126
+ {#each tabs as tab, index}
127
+ {#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>
135
+ </div>
136
+ {/if}
137
+ {/each}
114
138
  <noscript>
115
139
  <div class={classNoscript}>{messageNoScript}</div>
116
140
  </noscript>
@@ -1,35 +1,38 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  export interface TabsTab<T = any> {
3
3
  /** tab title, displayed in `button` element */
4
- title?: string;
4
+ tab?: string;
5
5
  /** slotted content, displayed once tab is clicked */
6
- content?: string;
6
+ panel?: string;
7
7
  /** any data to pass back to the parent */
8
8
  data?: T;
9
9
  }
10
+ import { type FadeParams } from "svelte/transition";
10
11
  declare const __propDef: {
11
12
  props: {
12
13
  class?: string | undefined;
13
14
  id?: string | undefined;
14
- /** class of the `div` that wraps the `button`s */ classHeader?: string | undefined;
15
- /** class of all title `button`s */ classTitle?: string | undefined;
16
- /** class of the active tab's `button` */ classTitleActive?: string | undefined;
17
- /** class of all the inactive tabs' `button`s */ classTitleInactive?: string | undefined;
15
+ /** class of the `div` that wraps the `button`s */ classTabList?: string | undefined;
16
+ /** class of all title `button`s */ classTab?: string | undefined;
17
+ /** class of the active tab's `button` */ classTabActive?: string | undefined;
18
+ /** class of all the inactive tabs' `button`s */ classTabInactive?: string | undefined;
18
19
  /** `noscript` class */ classNoscript?: string | undefined;
19
- /** class of `div` that wraps the slotted content */ classContent?: string | undefined;
20
- /** array of tabs */ tabs: TabsTab[];
21
- /** index of active tab, defaults to 0 */ activeIndex?: number | undefined;
20
+ /** class of `div` that wraps the slotted content */ classTabPanel?: string | undefined;
21
+ /** array of `TabsTab` objects */ tabs: TabsTab[];
22
+ /** index of selected tab, defaults to `0` */ selectedIndex?: number | undefined;
23
+ /** fades the panel content, set to `false` to remove */ transition?: false | FadeParams | undefined;
22
24
  };
23
25
  events: {
24
26
  [evt: string]: CustomEvent<any>;
25
27
  };
26
28
  slots: {
27
- title: {
28
- item: TabsTab<any>;
29
+ tab: {
30
+ tab: TabsTab<any>;
29
31
  index: any;
30
32
  };
31
- default: {
32
- activeTab: TabsTab<any>;
33
+ panel: {
34
+ selectedTab: TabsTab<any>;
35
+ index: any;
33
36
  };
34
37
  };
35
38
  };
@@ -39,27 +42,28 @@ export type TabsSlots = typeof __propDef.slots;
39
42
  /**
40
43
  * ### Tabs
41
44
  *
42
- * Displays tabs and the active tab's content.
45
+ * Displays tabs and the selected tab's content.
43
46
  *
44
47
  * @props
45
48
  *
46
- * - `activeIndex` - index of active tab, defaults to 0
47
- * - `classContent` - class of `div` that wraps the slotted content
48
- * - `classHeader` - class of the `div` that wraps the `button`s
49
49
  * - `classNoscript` - `noscript` class
50
- * - `classTitleActive` - class of the active tab's `button`
51
- * - `classTitleInactive` - class of all the inactive tabs' `button`s
52
- * - `classTitle` - class of all title `button`s
50
+ * - `classTabActive` - class of the active tab's `button`
51
+ * - `classTabInactive` - class of all the inactive tabs' `button`s
52
+ * - `classTabList` - class of the `div` that wraps the `button`s
53
+ * - `classTabPanel` - class of `div` that wraps the slotted content
54
+ * - `classTab` - class of all title `button`s
53
55
  * - `class`
54
56
  * - `id`
55
- * - `tabs` - array of tabs
57
+ * - `selectedIndex` - index of selected tab, defaults to `0`
58
+ * - `tabs` - array of `TabsTab` objects
59
+ * - `transition` - fades the panel content, set to `false` to remove
56
60
  *
57
61
  * @slots
58
62
  *
59
- * | name | purpose | default value | slot props |
60
- * | --------- | --------------------- | -------------------- | --------------- |
61
- * | `default` | active item's content | `activeItem.content` | `activeItem` |
62
- * | `title` | title of each tab | `item.title` | `item`, `index` |
63
+ * | name | purpose | default value | slot props |
64
+ * | ------- | ------------------ | ------------------- | ---------------------- |
65
+ * | `panel` | active tab's panel | `selectedTab.panel` | `selectedTab`, `index` |
66
+ * | `tab` | title of each tab | `tab.tab` | `tab`, `index` |
63
67
  *
64
68
  * @example
65
69
  *
@@ -70,41 +74,43 @@ export type TabsSlots = typeof __propDef.slots;
70
74
  * </script>
71
75
  *
72
76
  * <Tabs
73
- * classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
74
- * classTitle="btn rounded-sm p-0.5"
75
- * classTitleActive="bg-white text-gray-950"
76
- * classTitleInactive="bg-gray-200 text-gray-500"
77
- * classContent="py-2"
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"
82
+ * classTabPanel="py-2"
78
83
  * tabs={[
79
- * { title: "Tab 1", content: "Content 1" },
80
- * { title: "Tab 2", content: "Content 2" },
84
+ * { tab: "Tab", panel: "Content" },
85
+ * { tab: "Another Tab", panel: "Some more content" },
81
86
  * ]}
82
87
  * />
83
88
  *
84
89
  * <Tabs
85
- * classHeader="grid grid-flow-col grid-rows-1 gap-1 rounded bg-gray-200 p-1"
86
- * classTitle="btn rounded-sm p-0.5"
87
- * classTitleActive="bg-white text-gray-950"
88
- * classTitleInactive="bg-gray-200 text-gray-500"
89
- * classContent="py-2"
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"
94
+ * classTabPanel="py-2"
90
95
  * tabs={[
91
- * { title: "Tab", content: "Generated indexes" },
96
+ * { tab: "Tab", panel: "Generated indexes" },
92
97
  * {
93
- * title: "Tab",
94
- * content: "A tab with a component",
98
+ * tab: "Tab",
99
+ * panel: "A tab with a component",
95
100
  * data: { component: FullscreenButton },
96
101
  * },
97
102
  * ]}
98
- * let:activeTab
99
103
  * >
100
- * <svelte:fragment slot="title" let:item let:index>
101
- * {item.title}
104
+ * <svelte:fragment slot="tab" let:tab let:index>
105
+ * {tab.tab}
102
106
  * {index + 1}
103
107
  * </svelte:fragment>
104
- * <div>{activeTab.content}</div>
105
- * {#if activeTab.data?.component}
106
- * <svelte:component this={activeTab.data.component} class="btn" />
107
- * {/if}
108
+ * <svelte:fragment slot="panel" let:selectedTab>
109
+ * <div class="mb-2">{selectedTab.panel}</div>
110
+ * {#if selectedTab.data?.component}
111
+ * <svelte:component this={selectedTab.data.component} class="btn" />
112
+ * {/if}
113
+ * </svelte:fragment>
108
114
  * </Tabs>
109
115
  * ```
110
116
  */
package/dist/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import Accordion from "./components/Accordion.svelte";
2
2
  import type { AccordionItem } from "./components/Accordion.svelte";
3
+ import Breakpoint from "./components/Breakpoint.svelte";
3
4
  import Chord from "./components/Chord.svelte";
4
5
  import type { ChordNote } from "./components/Chord.svelte";
5
6
  import ContextMenu from "./components/ContextMenu.svelte";
@@ -15,4 +16,4 @@ import Sheet from "./components/Sheet.svelte";
15
16
  import Tabs from "./components/Tabs.svelte";
16
17
  import type { TabsTab } from "./components/Tabs.svelte";
17
18
  import YouTube from "./components/YouTube.svelte";
18
- export { Accordion, type AccordionItem, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };
19
+ export { Accordion, type AccordionItem, Breakpoint, Chord, type ChordNote, ContextMenu, CopyButton, DataTable, type DataTableRow, Editor, type EditorContentElement, FullscreenButton, Popover, ShareButton, Sheet, Tabs, type TabsTab, YouTube, };
package/dist/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import Accordion from "./components/Accordion.svelte";
2
+ import Breakpoint from "./components/Breakpoint.svelte";
2
3
  import Chord from "./components/Chord.svelte";
3
4
  import ContextMenu from "./components/ContextMenu.svelte";
4
5
  import CopyButton from "./components/CopyButton.svelte";
@@ -10,4 +11,4 @@ import ShareButton from "./components/ShareButton.svelte";
10
11
  import Sheet from "./components/Sheet.svelte";
11
12
  import Tabs from "./components/Tabs.svelte";
12
13
  import YouTube from "./components/YouTube.svelte";
13
- export { Accordion, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };
14
+ export { Accordion, Breakpoint, Chord, ContextMenu, CopyButton, DataTable, Editor, FullscreenButton, Popover, ShareButton, Sheet, Tabs, YouTube, };
@@ -0,0 +1 @@
1
+ export declare const delay = 800;
@@ -0,0 +1 @@
1
+ export const delay = 800;
@@ -1 +1 @@
1
- export declare const duration = 250;
1
+ export declare const duration = 150;
@@ -1 +1 @@
1
- export const duration = 250;
1
+ export const duration = 150;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drab",
3
- "version": "2.6.0",
3
+ "version": "2.7.0",
4
4
  "description": "An unstyled Svelte component library",
5
5
  "keywords": [
6
6
  "components",