flowbite-svelte 0.44.14 → 0.44.15

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,10 +3,11 @@ export let solid = false;
3
3
  export let navClass = 'flex';
4
4
  export let solidClass = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
5
5
  export let olClass = 'inline-flex items-center space-x-1 md:space-x-3';
6
+ export let ariaLabel = 'Breadcrumb';
6
7
  let classNav = solid ? solidClass : navClass;
7
8
  </script>
8
9
 
9
- <nav aria-label="Breadcrumb" {...$$restProps} class={twMerge(classNav, $$props.class)}>
10
+ <nav aria-label={ariaLabel} {...$$restProps} class={twMerge(classNav, $$props.class)}>
10
11
  <ol class={twMerge(olClass, $$props.classOl)}>
11
12
  <slot />
12
13
  </ol>
@@ -20,4 +21,5 @@ let classNav = solid ? solidClass : navClass;
20
21
  @prop export let navClass: string = 'flex';
21
22
  @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
22
23
  @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
24
+ @prop export let ariaLabel: string = 'Breadcrumb';
23
25
  -->
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  navClass?: string | undefined;
7
7
  solidClass?: string | undefined;
8
8
  olClass?: string | undefined;
9
+ ariaLabel?: string | undefined;
9
10
  };
10
11
  events: {
11
12
  [evt: string]: CustomEvent<any>;
@@ -24,6 +25,7 @@ export type BreadcrumbSlots = typeof __propDef.slots;
24
25
  * @prop export let navClass: string = 'flex';
25
26
  * @prop export let solidClass: string = 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700';
26
27
  * @prop export let olClass: string = 'inline-flex items-center space-x-1 md:space-x-3';
28
+ * @prop export let ariaLabel: string = 'Breadcrumb';
27
29
  */
28
30
  export default class Breadcrumb extends SvelteComponent<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
29
31
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAuBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
1
+ {"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/breadcrumbs/Breadcrumb.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAwBD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
@@ -8,10 +8,12 @@ import { fade } from 'svelte/transition';
8
8
  import { twMerge } from 'tailwind-merge';
9
9
  import Controls from './Controls.svelte';
10
10
  import Indicators from './Indicators.svelte';
11
+ import Slide from './Slide.svelte';
11
12
  export let images;
12
13
  export let index = 0;
13
14
  export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
14
15
  export let duration = 0;
16
+ export let ariaLabel = 'Draggable Carousel';
15
17
  // Carousel
16
18
  let divClass = 'overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96';
17
19
  const dispatch = createEventDispatcher();
@@ -116,11 +118,11 @@ $: onDragStop =
116
118
 
117
119
  <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
118
120
  <svelte:document on:mousemove={onDragMove} on:mouseup={onDragStop} on:touchmove={onDragMove} on:touchend={onDragStop} />
119
- <div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label="Draggable Carousel" tabindex="0">
121
+ <div bind:this={carouselDiv} class="relative" on:mousedown={onDragStart} on:touchstart|passive={onDragStart} role="button" aria-label={ariaLabel} tabindex="0">
120
122
  <div style={`transform: translateX(${percentOffset}%)`} {...$$restProps} class={twMerge(divClass, activeDragGesture === undefined ? 'transition-transform' : '', $$props.class)} use:loop={duration}>
121
- {#key images[index]}
122
- <img alt="..." {...images[index]} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
123
- {/key}
123
+ <slot name="slide" {Slide} {index}>
124
+ <Slide image={images[index]} {transition} />
125
+ </slot>
124
126
  </div>
125
127
  <slot {index} {Controls} {Indicators} />
126
128
  </div>
@@ -133,4 +135,5 @@ $: onDragStop =
133
135
  @prop export let index: number = 0;
134
136
  @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
135
137
  @prop export let duration: number = 0;
138
+ @prop export let ariaLabel: string = 'Draggable Carousel';
136
139
  -->
@@ -7,6 +7,7 @@ import type { HTMLImgAttributes } from 'svelte/elements';
7
7
  import { type TransitionConfig } from 'svelte/transition';
8
8
  import Controls from './Controls.svelte';
9
9
  import Indicators from './Indicators.svelte';
10
+ import Slide from './Slide.svelte';
10
11
  declare const __propDef: {
11
12
  props: {
12
13
  [x: string]: any;
@@ -14,6 +15,7 @@ declare const __propDef: {
14
15
  index?: number | undefined;
15
16
  transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
16
17
  duration?: number | undefined;
18
+ ariaLabel?: string | undefined;
17
19
  };
18
20
  events: {
19
21
  change: CustomEvent<any>;
@@ -21,6 +23,10 @@ declare const __propDef: {
21
23
  [evt: string]: CustomEvent<any>;
22
24
  };
23
25
  slots: {
26
+ slide: {
27
+ Slide: typeof Slide;
28
+ index: number;
29
+ };
24
30
  default: {
25
31
  index: number;
26
32
  Controls: typeof Controls;
@@ -38,6 +44,7 @@ export type CarouselSlots = typeof __propDef.slots;
38
44
  * @prop export let index: number = 0;
39
45
  * @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
40
46
  * @prop export let duration: number = 0;
47
+ * @prop export let ariaLabel: string = 'Draggable Carousel';
41
48
  */
42
49
  export default class Carousel extends SvelteComponent<CarouselProps, CarouselEvents, CarouselSlots> {
43
50
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AA8J7C,QAAA,MAAM,SAAS;;;gBAD2F,iBAAiB,EAAE;;6BAjJ9F,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;CAkJE,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
1
+ {"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAKJ,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEhE,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AACzC,OAAO,UAAU,MAAM,qBAAqB,CAAC;AAC7C,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAgKnC,QAAA,MAAM,SAAS;;;gBADkH,iBAAiB,EAAE;;6BAlJrH,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;;;;;;;;;;;;;;;CAmJE,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
@@ -0,0 +1,17 @@
1
+ <script>import { quintOut } from 'svelte/easing';
2
+ import { fade } from 'svelte/transition';
3
+ export let image;
4
+ export let transition = (x) => fade(x, { duration: 700, easing: quintOut });
5
+ </script>
6
+
7
+ {#key image}
8
+ <img alt="..." {...image} transition:transition={{}} class="absolute block w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 object-cover" />
9
+ {/key}
10
+
11
+ <!--
12
+ @component
13
+ [Go to docs](https://flowbite-svelte.com/)
14
+ ## Props
15
+ @prop export let image: HTMLImgAttributes;
16
+ @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
17
+ -->
@@ -0,0 +1,26 @@
1
+ import { SvelteComponent } from "svelte";
2
+ import type { HTMLImgAttributes } from 'svelte/elements';
3
+ import { type TransitionConfig } from 'svelte/transition';
4
+ declare const __propDef: {
5
+ props: {
6
+ image: HTMLImgAttributes;
7
+ transition?: ((node: HTMLElement, params: any) => TransitionConfig) | undefined;
8
+ };
9
+ events: {
10
+ [evt: string]: CustomEvent<any>;
11
+ };
12
+ slots: {};
13
+ };
14
+ export type SlideProps = typeof __propDef.props;
15
+ export type SlideEvents = typeof __propDef.events;
16
+ export type SlideSlots = typeof __propDef.slots;
17
+ /**
18
+ * [Go to docs](https://flowbite-svelte.com/)
19
+ * ## Props
20
+ * @prop export let image: HTMLImgAttributes;
21
+ * @prop export let transition: TransitionFunc = (x) => fade(x, { duration: 700, easing: quintOut });
22
+ */
23
+ export default class Slide extends SvelteComponent<SlideProps, SlideEvents, SlideSlots> {
24
+ }
25
+ export {};
26
+ //# sourceMappingURL=Slide.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Slide.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Slide.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAED,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAqBhE,QAAA,MAAM,SAAS;;eADoD,iBAAiB;6BAbrD,WAAW,UAAU,GAAG,KAAK,gBAAgB;;;;;;CAcrB,CAAC;AACxD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,eAAe,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CACtF"}
@@ -2,6 +2,7 @@
2
2
  import Thumbnail from './Thumbnail.svelte';
3
3
  export let images = [];
4
4
  export let index = 0;
5
+ export let ariaLabel = 'Click to view image';
5
6
  $: index = (index + images.length) % images.length;
6
7
  </script>
7
8
 
@@ -9,7 +10,7 @@ $: index = (index + images.length) % images.length;
9
10
  {#each images as image, idx}
10
11
  {@const selected = index === idx}
11
12
  <!-- svelte-ignore a11y-click-events-have-key-events -->
12
- <button on:click={() => (index = idx)} aria-label="Click to view image">
13
+ <button on:click={() => (index = idx)} aria-label={ariaLabel}>
13
14
  <slot {Thumbnail} {image} {selected}>
14
15
  <Thumbnail {...image} {selected} />
15
16
  </slot>
@@ -23,4 +24,5 @@ $: index = (index + images.length) % images.length;
23
24
  ## Props
24
25
  @prop export let images: HTMLImgAttributes[] = [];
25
26
  @prop export let index: number = 0;
27
+ @prop export let ariaLabel: string = 'Click to view image';
26
28
  -->
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  [x: string]: any;
7
7
  images?: HTMLImgAttributes[] | undefined;
8
8
  index?: number | undefined;
9
+ ariaLabel?: string | undefined;
9
10
  };
10
11
  events: {
11
12
  [evt: string]: CustomEvent<any>;
@@ -26,6 +27,7 @@ export type ThumbnailsSlots = typeof __propDef.slots;
26
27
  * ## Props
27
28
  * @prop export let images: HTMLImgAttributes[] = [];
28
29
  * @prop export let index: number = 0;
30
+ * @prop export let ariaLabel: string = 'Click to view image';
29
31
  */
30
32
  export default class Thumbnails extends SvelteComponent<ThumbnailsProps, ThumbnailsEvents, ThumbnailsSlots> {
31
33
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA6B3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
1
+ {"version":3,"file":"Thumbnails.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/carousels/Thumbnails.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AA8B3C,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
@@ -1,6 +1,7 @@
1
1
  <script>import { twMerge } from 'tailwind-merge';
2
2
  export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
3
3
  export let size = 'md';
4
+ export let ariaLabel = 'Dark mode';
4
5
  const sizes = {
5
6
  sm: 'w-4 h-4',
6
7
  md: 'w-5 h-5',
@@ -24,7 +25,7 @@ const toggleTheme = () => {
24
25
  </script>
25
26
  </svelte:head>
26
27
 
27
- <button on:click={toggleTheme} aria-label="Dark mode" type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
28
+ <button on:click={toggleTheme} aria-label={ariaLabel} type="button" {...$$restProps} class={twMerge(btnClass, $$props.class)}>
28
29
  <span class="hidden dark:block">
29
30
  <slot name="lightIcon">
30
31
  <svg class={sizes[size]} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -51,4 +52,5 @@ const toggleTheme = () => {
51
52
  ## Props
52
53
  @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
53
54
  @prop export let size: 'sm' | 'md' | 'lg' = 'md';
55
+ @prop export let ariaLabel: string = 'Dark mode';
54
56
  -->
@@ -4,6 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  btnClass?: string | undefined;
6
6
  size?: "sm" | "lg" | "md" | undefined;
7
+ ariaLabel?: string | undefined;
7
8
  };
8
9
  events: {
9
10
  [evt: string]: CustomEvent<any>;
@@ -21,6 +22,7 @@ export type DarkModeSlots = typeof __propDef.slots;
21
22
  * ## Props
22
23
  * @prop export let btnClass: string = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5';
23
24
  * @prop export let size: 'sm' | 'md' | 'lg' = 'md';
25
+ * @prop export let ariaLabel: string = 'Dark mode';
24
26
  */
25
27
  export default class DarkMode extends SvelteComponent<DarkModeProps, DarkModeEvents, DarkModeSlots> {
26
28
  }
@@ -1 +1 @@
1
- {"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AA+CD,QAAA,MAAM,SAAS;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
1
+ {"version":3,"file":"DarkMode.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/darkmode/DarkMode.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAgDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,eAAe,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CAClG"}
@@ -7,6 +7,7 @@ export let normalClass = 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gr
7
7
  export let ulClass = 'inline-flex -space-x-px items-center';
8
8
  export let table = false;
9
9
  export let large = false;
10
+ export let ariaLabel = 'Page navigation';
10
11
  const dispatch = createEventDispatcher();
11
12
  setContext('group', true);
12
13
  setContext('table', table);
@@ -18,7 +19,7 @@ const next = () => {
18
19
  };
19
20
  </script>
20
21
 
21
- <nav aria-label="Page navigation">
22
+ <nav aria-label={ariaLabel}>
22
23
  <ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
23
24
  <li>
24
25
  <PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
@@ -50,4 +51,5 @@ const next = () => {
50
51
  @prop export let ulClass: string = 'inline-flex -space-x-px items-center';
51
52
  @prop export let table: boolean = false;
52
53
  @prop export let large: boolean = false;
54
+ @prop export let ariaLabel: string = 'Page navigation';
53
55
  -->
@@ -9,6 +9,7 @@ declare const __propDef: {
9
9
  ulClass?: string | undefined;
10
10
  table?: boolean | undefined;
11
11
  large?: boolean | undefined;
12
+ ariaLabel?: string | undefined;
12
13
  };
13
14
  events: {
14
15
  blur: FocusEvent;
@@ -43,6 +44,7 @@ export type PaginationSlots = typeof __propDef.slots;
43
44
  * @prop export let ulClass: string = 'inline-flex -space-x-px items-center';
44
45
  * @prop export let table: boolean = false;
45
46
  * @prop export let large: boolean = false;
47
+ * @prop export let ariaLabel: string = 'Page navigation';
46
48
  */
47
49
  export default class Pagination extends SvelteComponent<PaginationProps, PaginationEvents, PaginationSlots> {
48
50
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAuDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
1
+ {"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/paginations/Pagination.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAGD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAwDzC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,eAAe,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC1G"}
@@ -9,6 +9,7 @@ export let activeUrl = '';
9
9
  export let asideClass = 'w-64';
10
10
  export let nonActiveClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
11
11
  export let activeClass = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
12
+ export let ariaLabel = 'Sidebar';
12
13
  setContext('sidebarContext', { activeClass, nonActiveClass });
13
14
  $: {
14
15
  activeUrlStore.set(activeUrl);
@@ -16,7 +17,7 @@ $: {
16
17
  setContext('activeUrl', activeUrlStore);
17
18
  </script>
18
19
 
19
- <aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label="Sidebar">
20
+ <aside {...$$restProps} class={twMerge(asideClass, $$props.class)} aria-label={ariaLabel}>
20
21
  <slot />
21
22
  </aside>
22
23
 
@@ -28,4 +29,5 @@ setContext('activeUrl', activeUrlStore);
28
29
  @prop export let asideClass: string = 'w-64';
29
30
  @prop export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
30
31
  @prop export let activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
32
+ @prop export let ariaLabel: string = 'Sidebar';
31
33
  -->
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  asideClass?: string | undefined;
11
11
  nonActiveClass?: string | undefined;
12
12
  activeClass?: string | undefined;
13
+ ariaLabel?: string | undefined;
13
14
  };
14
15
  events: {
15
16
  [evt: string]: CustomEvent<any>;
@@ -28,6 +29,7 @@ export type SidebarSlots = typeof __propDef.slots;
28
29
  * @prop export let asideClass: string = 'w-64';
29
30
  * @prop export let nonActiveClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
30
31
  * @prop export let activeClass: string = 'flex items-center p-2 text-base font-normal text-gray-900 bg-gray-200 dark:bg-gray-700 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
32
+ * @prop export let ariaLabel: string = 'Sidebar';
31
33
  */
32
34
  export default class Sidebar extends SvelteComponent<SidebarProps, SidebarEvents, SidebarSlots> {
33
35
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAqCJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}
1
+ {"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/sidebars/Sidebar.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AACC,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAsCJ,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,eAAe,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CAC9F"}
@@ -32,7 +32,7 @@ let trClass;
32
32
  $: trClass = twMerge([!getContext('noborder') && 'border-b last:border-b-0', colors[color], getContext('hoverable') && hoverColors[color], getContext('striped') && stripColors[color], $$props.class]);
33
33
  </script>
34
34
 
35
- <tr {...$$restProps} class={trClass} on:click on:contextmenu>
35
+ <tr {...$$restProps} class={trClass} on:click on:contextmenu on:dblclick>
36
36
  <slot />
37
37
  </tr>
38
38
 
@@ -7,6 +7,7 @@ declare const __propDef: {
7
7
  events: {
8
8
  click: MouseEvent;
9
9
  contextmenu: MouseEvent;
10
+ dblclick: MouseEvent;
10
11
  } & {
11
12
  [evt: string]: CustomEvent<any>;
12
13
  };
@@ -1 +1 @@
1
- {"version":3,"file":"TableBodyRow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/tables/TableBodyRow.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,eAAe,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CAClH"}
1
+ {"version":3,"file":"TableBodyRow.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/tables/TableBodyRow.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAEvC;AAoDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,eAAe,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CAClH"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.44.14",
3
+ "version": "0.44.15",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "dist/index.js",
6
6
  "author": {
@@ -218,6 +218,10 @@
218
218
  "types": "./dist/carousels/Indicators.svelte.d.ts",
219
219
  "svelte": "./dist/carousels/Indicators.svelte"
220
220
  },
221
+ "./Slide.svelte": {
222
+ "types": "./dist/carousels/Slide.svelte.d.ts",
223
+ "svelte": "./dist/carousels/Slide.svelte"
224
+ },
221
225
  "./Thumbnail.svelte": {
222
226
  "types": "./dist/carousels/Thumbnail.svelte.d.ts",
223
227
  "svelte": "./dist/carousels/Thumbnail.svelte"