@functionalcms/svelte-components 4.2.12 → 4.2.14

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.
Files changed (4) hide show
  1. package/dist/components/form/Button.svelte +118 -114
  2. package/dist/components/form/Button.svelte.d.ts +1 -0
  3. package/dist/components/presentation/Carousel.svelte +2 -0
  4. package/package.json +1 -1
package/dist/components/form/Button.svelte CHANGED
@@ -1,116 +1,120 @@
1
- <script lang="ts">
2
- import { cn } from '../../utils.js';
3
- import type { Snippet } from 'svelte';
4
-
5
- interface Props {
6
- children: Snippet;
7
- css: string;
8
- style: string;
9
- type?: 'submit' | 'reset' | 'button' | 'link';
10
- href: string;
11
- mode?: string;
12
- size?: string;
13
- isPrimary: boolean;
14
- isBordered?: boolean;
15
- isCapsule?: boolean;
16
- isGrouped?: boolean;
17
- isBlock?: boolean;
18
- isLink?: boolean;
19
- isBlank?: boolean;
20
- isDisabled?: boolean;
21
- role?: string;
22
- isCircle?: boolean;
23
- isRounded?: boolean;
24
- isSkinned?: boolean;
25
- ariaSelected?: boolean;
26
- ariaControls?: string;
27
- tabIndex?: number;
28
- click?: () => void;
29
- keydown?: (e: KeyboardEvent) => void;
30
- }
31
-
32
- let {
33
- children,
34
- css = '',
35
- style = '',
36
- href = '',
37
- mode = undefined,
38
- size = undefined,
39
- type = 'button',
40
- isPrimary = false,
41
- isBordered = false,
42
- isCapsule = false,
43
- isGrouped = false,
44
- isBlock = false,
45
- isLink = false,
46
- isBlank = false,
47
- isDisabled = false,
48
- role = undefined,
49
- isCircle = false,
50
- isRounded = false,
51
- isSkinned = true,
52
- ariaSelected = undefined,
53
- ariaControls = undefined,
54
- tabIndex = 0,
55
- click = undefined,
56
- keydown = undefined,
57
- ...restProps
58
- }: Partial<Props> = $props();
59
-
60
- let klasses = $derived(
61
- cn(
62
- isSkinned ? 'btn' : 'btn-base',
63
- mode ? `btn-${mode}` : '',
64
- size ? `btn-${size}` : '',
65
- isBordered ? 'btn-bordered' : '',
66
- isCapsule ? 'btn-capsule ' : '',
67
- isGrouped ? 'btn-grouped' : '',
68
- isBlock ? 'btn-block' : '',
69
- isCircle ? 'btn-circle' : '',
70
- isRounded ? 'btn-rounded' : '',
71
- isDisabled ? 'disabled' : '',
72
- isBlank ? 'btn-blank' : '',
73
- isLink ? 'btn-link' : '',
74
- css ? `${css}` : ''
75
- )
76
- );
77
-
78
- </script>
79
-
80
- {#if type == 'link'}
81
- <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
82
- <a
83
- class={klasses}
84
- {href}
85
- {style}
86
- {role}
87
- aria-selected={ariaSelected}
88
- aria-controls={ariaControls}
89
- tabindex={tabIndex}
90
- onclick={onclick}
91
- onkeydown={onkeydown}
92
- {...restProps}
93
- >
94
- {@render children?.()}
95
- </a>
96
- {:else}
97
- <button
98
- {type}
99
- class={klasses}
100
- {style}
101
- {role}
102
- aria-selected={ariaSelected}
103
- aria-controls={ariaControls}
104
- tabindex={tabIndex}
105
- disabled={isDisabled}
106
- onclick={onclick}
107
- onkeydown={onkeydown}
108
- {...restProps}
109
- >
110
- {@render children?.()}
111
- </button>
112
- {/if}
113
-
1
+ <script lang="ts">
2
+ import { cn } from '../../utils.js';
3
+ import type { Snippet } from 'svelte';
4
+
5
+ interface Props {
6
+ children: Snippet;
7
+ css: string;
8
+ style: string;
9
+ type?: 'submit' | 'reset' | 'button' | 'link';
10
+ href: string;
11
+ mode?: string;
12
+ size?: string;
13
+ isPrimary: boolean;
14
+ isBordered?: boolean;
15
+ isCapsule?: boolean;
16
+ isGrouped?: boolean;
17
+ isBlock?: boolean;
18
+ isLink?: boolean;
19
+ isBlank?: boolean;
20
+ isDisabled?: boolean;
21
+ role?: string;
22
+ isCircle?: boolean;
23
+ isRounded?: boolean;
24
+ isSkinned?: boolean;
25
+ ariaSelected?: boolean;
26
+ ariaControls?: string;
27
+ tabIndex?: number;
28
+ ariaLabel: string;
29
+ click?: () => void;
30
+ keydown?: (e: KeyboardEvent) => void;
31
+ }
32
+
33
+ let {
34
+ children,
35
+ css = '',
36
+ style = '',
37
+ href = '',
38
+ mode = undefined,
39
+ size = undefined,
40
+ type = 'button',
41
+ isPrimary = false,
42
+ isBordered = false,
43
+ isCapsule = false,
44
+ isGrouped = false,
45
+ isBlock = false,
46
+ isLink = false,
47
+ isBlank = false,
48
+ isDisabled = false,
49
+ role = undefined,
50
+ isCircle = false,
51
+ isRounded = false,
52
+ isSkinned = true,
53
+ ariaSelected = undefined,
54
+ ariaControls = undefined,
55
+ tabIndex = 0,
56
+ click = undefined,
57
+ keydown = undefined,
58
+ ariaLabel = '',
59
+ ...restProps
60
+ }: Partial<Props> = $props();
61
+
62
+ let klasses = $derived(
63
+ cn(
64
+ isSkinned ? 'btn' : 'btn-base',
65
+ mode ? `btn-${mode}` : '',
66
+ size ? `btn-${size}` : '',
67
+ isBordered ? 'btn-bordered' : '',
68
+ isCapsule ? 'btn-capsule ' : '',
69
+ isGrouped ? 'btn-grouped' : '',
70
+ isBlock ? 'btn-block' : '',
71
+ isCircle ? 'btn-circle' : '',
72
+ isRounded ? 'btn-rounded' : '',
73
+ isDisabled ? 'disabled' : '',
74
+ isBlank ? 'btn-blank' : '',
75
+ isLink ? 'btn-link' : '',
76
+ css ? `${css}` : ''
77
+ )
78
+ );
79
+
80
+ </script>
81
+
82
+ {#if type == 'link'}
83
+ <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
84
+ <a
85
+ class={klasses}
86
+ {href}
87
+ {style}
88
+ {role}
89
+ aria-selected={ariaSelected}
90
+ aria-controls={ariaControls}
91
+ aria-label={ariaLabel}
92
+ tabindex={tabIndex}
93
+ onclick={onclick}
94
+ onkeydown={onkeydown}
95
+ {...restProps}
96
+ >
97
+ {@render children?.()}
98
+ </a>
99
+ {:else}
100
+ <button
101
+ {type}
102
+ class={klasses}
103
+ {style}
104
+ {role}
105
+ aria-selected={ariaSelected}
106
+ aria-controls={ariaControls}
107
+ aria-label={ariaLabel}
108
+ tabindex={tabIndex}
109
+ disabled={isDisabled}
110
+ onclick={onclick}
111
+ onkeydown={onkeydown}
112
+ {...restProps}
113
+ >
114
+ {@render children?.()}
115
+ </button>
116
+ {/if}
117
+
114
118
  <style>.btn-base {
115
119
  display: inline-flex;
116
120
  align-items: center;
@@ -382,4 +386,4 @@ on the side padding. As such, these have a good bit less then regular buttons. *
382
386
 
383
387
  .btn-link:hover {
384
388
  cursor: pointer;
385
- }</style>
389
+ }</style>
package/dist/components/form/Button.svelte.d.ts CHANGED
@@ -22,6 +22,7 @@ declare const Button: import("svelte").Component<Partial<{
22
22
  ariaSelected?: boolean;
23
23
  ariaControls?: string;
24
24
  tabIndex?: number;
25
+ ariaLabel: string;
25
26
  click?: () => void;
26
27
  keydown?: (e: KeyboardEvent) => void;
27
28
  }>, {}, "">;
package/dist/components/presentation/Carousel.svelte CHANGED
@@ -48,6 +48,7 @@
48
48
  <Button
49
49
  type="button"
50
50
  css="carousel__prev"
51
+ ariaLabel="Previous item on Carousele"
51
52
  style="order: -1 !important;width: 50px;height: 100%;background: none;border: none !important;align-self: center;"
52
53
  onclick={() => embla.scrollPrev()}
53
54
  >
@@ -71,6 +72,7 @@
71
72
  <Button
72
73
  type="button"
73
74
  css="carousel__next"
75
+ ariaLabel="Next item on Carousele"
74
76
  style="order: 1000 !important;width: 50px;height: 100%;background: none; border: none !important;align-self: center;"
75
77
  onclick={() => embla.scrollNext()}
76
78
  >
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@functionalcms/svelte-components",
3
- "version": "4.2.12",
3
+ "version": "4.2.14",
4
4
  "watch": {
5
5
  "build": {
6
6
  "patterns": [