sveltacular 0.0.11 → 0.0.13

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 (16) hide show
  1. package/README.md +24 -4
  2. package/dist/forms/button/button.svelte +46 -39
  3. package/dist/forms/check-box/check-box.svelte +50 -22
  4. package/dist/forms/date-box/date-box.svelte +7 -4
  5. package/dist/forms/file-box/file-box.svelte +5 -5
  6. package/dist/forms/list-box/list-box.svelte +5 -5
  7. package/dist/forms/number-box/number-box.svelte +6 -6
  8. package/dist/forms/radio-group/radio-box.svelte +46 -9
  9. package/dist/forms/switch-box/switch-box.svelte +6 -3
  10. package/dist/forms/text-area/text-area.svelte +6 -3
  11. package/dist/forms/text-box/text-box.svelte +6 -6
  12. package/dist/navigation/app-bar/app-nav-item.svelte +26 -12
  13. package/dist/navigation/app-bar/app-nav-item.svelte.d.ts +3 -1
  14. package/dist/navigation/side-bar/side-bar.svelte +6 -4
  15. package/dist/types/form.d.ts +1 -1
  16. package/package.json +1 -1
package/README.md CHANGED
@@ -1,11 +1,31 @@
1
- # Sveltacular
1
+ ![Sveltacular](https://raw.githubusercontent.com/jasonbyrne/sveltacular/main/static/sveltacular.png)
2
2
 
3
- I got tired of creating the same components over and over, so I decided to make an open source library of Svelte components.
3
+ Sveltacular is TypeScript and SASS based component library for Svelte, with no other dependencies.
4
4
 
5
- This library is TypeScript and SASS based. It uses vanilla CSS without any frameworks to get in the way.
5
+ Why did I create it when there are other options? Well, mainly because the best options out there were based on Tailwind. And, no disrespect to those who love it, but I didn't want to use Tailwind. So since I didn't find what I was loooking for, I made my own.
6
6
 
7
7
  ## Run Storybook
8
8
 
9
- ```
9
+ I don't have great documentation for now, but you can browse all of the available components by running Storybook locally. Check out the repo and then run this command:
10
+
11
+ ```bash
10
12
  npm run storybook
11
13
  ```
14
+
15
+ ## Usage
16
+
17
+ Install it in your project
18
+
19
+ ```bash
20
+ npm i sveltacular
21
+ ```
22
+
23
+ Then use it like this:
24
+
25
+ ```svelte
26
+ <script lang="ts">
27
+ import { Button } from 'sveltacular';
28
+ </script>
29
+
30
+ <Button>Hello World</Button>
31
+ ```
package/dist/forms/button/button.svelte CHANGED
@@ -26,8 +26,8 @@ const click = () => {
26
26
  cursor: pointer;
27
27
  margin-top: 0.5rem;
28
28
  margin-bottom: 0.5rem;
29
- background-color: #5c5c5c;
30
- border: 1px solid #b7b7b7;
29
+ border-width: 1px;
30
+ border-style: solid;
31
31
  border-radius: 0.25rem;
32
32
  color: #e2e2e2;
33
33
  cursor: pointer;
@@ -38,7 +38,7 @@ const click = () => {
38
38
  padding: 0.5rem 1rem;
39
39
  text-align: center;
40
40
  text-decoration: none;
41
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
41
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
42
42
  user-select: none;
43
43
  white-space: nowrap;
44
44
  }
@@ -75,59 +75,66 @@ button:hover {
75
75
  background-color: #4c4c4c;
76
76
  }
77
77
  button.primary {
78
- background-color: #1e88e5;
79
- border-color: #1e88e5;
80
- color: #fff;
78
+ background-color: var(--button-primary-bg, #1e88e5);
79
+ border-color: var(--button-primary-border, #1e88e5);
80
+ color: var(--button-primary-fg, #fff);
81
81
  }
82
82
  button.primary:hover {
83
- background-color: #1976d2;
84
- border-color: #1976d2;
83
+ background-color: var(--button-primary-hover-bg, #1976d2);
84
+ color: var(--button-primary-hover-fg, #fff);
85
85
  }
86
- button.link, button.ghost {
87
- background-color: transparent;
88
- border-color: transparent;
89
- color: var(--sv-color-link);
90
- text-decoration: underline;
86
+ button.secondary {
87
+ background-color: var(--button-secondary-bg, #e2e2e2);
88
+ border-color: var(--button-secondary-border, #e2e2e2);
89
+ color: var(--button-secondary-fg, #000);
91
90
  }
92
- button.link:hover, button.ghost:hover {
91
+ button.secondary:hover {
92
+ background-color: var(--button-secondary-hover-bg, #d5d5d5);
93
+ color: var(--button-secondary-hover-fg, #000);
94
+ }
95
+ button.ghost {
93
96
  background-color: transparent;
94
97
  border-color: transparent;
95
- color: var(--sv-color-link-hover);
98
+ color: var(--base-fg, #ccc);
99
+ text-decoration: none;
100
+ }
101
+ button.ghost:hover {
102
+ background-color: var(--button-ghost-hover-bg, #e0e0e0);
103
+ color: var(--button-ghost-hover-fg, #1e88e5);
96
104
  }
97
105
  button.positive {
98
- background-color: #43a047;
99
- border-color: #43a047;
100
- color: #fff;
106
+ background-color: var(--button-positive-bg, #43a047);
107
+ border-color: var(--button-positive-border, #43a047);
108
+ color: var(--button-positive-fg, #fff);
101
109
  }
102
110
  button.positive:hover {
103
- background-color: #388e3c;
104
- border-color: #388e3c;
111
+ background-color: var(--button-positive-hover-bg, #388e3c);
112
+ color: var(--button-positive-hover-fg, #388e3c);
105
113
  }
106
114
  button.danger {
107
- background-color: #8d0200;
108
- border-color: #8d0200;
109
- color: #fff;
115
+ background-color: var(--button-danger-bg, #e53935);
116
+ border-color: var(--button-danger-border, #e53935);
117
+ color: var(--button-danger-fg, #fff);
110
118
  }
111
119
  button.danger:hover {
112
- background-color: #c62828;
113
- border-color: #c62828;
120
+ background-color: var(--button-danger-hover-bg, #c62828);
121
+ color: var(--button-danger-hover-fg, #fff);
114
122
  }
115
- button.negative {
116
- background-color: #e53935;
117
- border-color: #e53935;
118
- color: #fff;
123
+ button.outline {
124
+ background-color: transparent;
125
+ border-color: var(--button-outline-border, #e2e2e2);
126
+ color: var(--button-outline-fg, #e2e2e2);
119
127
  }
120
- button.negative:hover {
121
- background-color: #c62828;
122
- border-color: #c62828;
128
+ button.outline:hover {
129
+ background-color: var(--button-outline-hover-bg, #e2e2e2);
130
+ color: var(--button-outline-hover-fg, #000);
123
131
  }
124
- button.tertiary {
132
+ button.link {
125
133
  background-color: transparent;
126
- border-color: var(--sv-color-fg);
127
- color: var(--sv-color-fg);
134
+ border-color: transparent;
135
+ color: var(--base-link-fg, #1e88e5);
136
+ text-decoration: underline;
128
137
  }
129
- button.tertiary:hover {
130
- background-color: var(--sv-color-fg);
131
- color: var(--sv-color-bg);
132
- border-color: var(--sv-color-bg);
138
+ button.link:hover {
139
+ color: var(--base-link-hover-fg, #1e88e5);
133
140
  }</style>
package/dist/forms/check-box/check-box.svelte CHANGED
@@ -1,4 +1,5 @@
1
1
  <script>import { uniqueId } from "../../helpers/unique-id.js";
2
+ import CheckIcon from "../../icons/check-icon.svelte";
2
3
  import { createEventDispatcher } from "svelte";
3
4
  export let value = "";
4
5
  export let isChecked = false;
@@ -13,7 +14,7 @@ const onChecked = (event) => {
13
14
  };
14
15
  </script>
15
16
 
16
- <div>
17
+ <label>
17
18
  <input
18
19
  type="checkbox"
19
20
  {id}
@@ -23,34 +24,61 @@ const onChecked = (event) => {
23
24
  bind:checked={isChecked}
24
25
  on:change={onChecked}
25
26
  />
27
+ <span class="checkbox">
28
+ <span class="checkmark"><CheckIcon /></span>
29
+ </span>
26
30
  {#if $$slots.default}
27
- <label for={id}>
31
+ <div class="text">
28
32
  <slot />
29
- </label>
33
+ </div>
30
34
  {/if}
31
- </div>
35
+ </label>
32
36
 
33
- <style>div label {
34
- display: inline-block;
35
- vertical-align: middle;
36
- margin-left: 0.5em;
37
+ <style>label {
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: flex-start;
37
41
  cursor: pointer;
42
+ }
43
+ label .text {
44
+ display: block;
45
+ margin-left: 0.5em;
38
46
  font-size: 1rem;
39
47
  line-height: 2rem;
40
48
  }
41
- div input {
42
- display: inline-block;
43
- vertical-align: middle;
44
- margin: 0;
45
- padding: 0;
46
- width: 1em;
47
- height: 1em;
48
- border: 0.1em solid #000;
49
- border-radius: 0.2em;
50
- background-color: #fff;
51
- cursor: pointer;
52
- transition: background-color 0.3s ease-in-out;
49
+ label .checkbox {
50
+ position: relative;
51
+ display: block;
52
+ width: 1rem;
53
+ height: 1rem;
54
+ border: 1px solid var(--form-input-border, black);
55
+ background-color: var(--form-input-bg, white);
56
+ color: var(--form-input-fg, black);
57
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
58
+ user-select: none;
59
+ }
60
+ label .checkbox .checkmark {
61
+ display: block;
62
+ position: absolute;
63
+ top: 0;
64
+ left: 0;
65
+ width: 0;
66
+ height: 0;
67
+ background-color: var(--form-input-checked-bg, #3182ce);
68
+ color: var(--form-input-checked-fg, white);
69
+ fill: var(--form-input-checked-bg, #3182ce);
70
+ stroke: var(--form-input-checked-fg, white);
71
+ transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
72
+ }
73
+ label input {
74
+ width: 0;
75
+ height: 0;
76
+ }
77
+ label input:checked + .checkbox {
78
+ background-color: var(--form-input-bg, white);
79
+ border-color: var(--form-input-border, black);
53
80
  }
54
- div input:checked {
55
- background-color: #000;
81
+ label input:checked + .checkbox .checkmark {
82
+ width: 100%;
83
+ height: 100%;
56
84
  }</style>
package/dist/forms/date-box/date-box.svelte CHANGED
@@ -43,16 +43,19 @@ $:
43
43
  width: 100%;
44
44
  padding: 0.5rem 1rem;
45
45
  border-radius: 0.25rem;
46
- border: 1px solid #b7b7b7;
47
- background-color: #fff;
48
- color: #5c5c5c;
46
+ border: 1px solid var(--form-input-border, black);
47
+ background-color: var(--form-input-bg, white);
48
+ color: var(--form-input-fg, black);
49
49
  font-size: 0.875rem;
50
50
  font-weight: 500;
51
51
  line-height: 1.25rem;
52
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
52
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
53
53
  user-select: none;
54
54
  white-space: nowrap;
55
55
  }
56
+ input::placeholder {
57
+ color: var(--form-input-placeholder, #a0aec0);
58
+ }
56
59
 
57
60
  div {
58
61
  display: block;
package/dist/forms/file-box/file-box.svelte CHANGED
@@ -37,17 +37,17 @@ export let capture = void 0;
37
37
  width: 100%;
38
38
  padding: 0.5rem 1rem;
39
39
  border-radius: 0.25rem;
40
- border: 1px solid #b7b7b7;
41
- background-color: #fff;
42
- color: #5c5c5c;
40
+ border: 1px solid var(--form-input-border, black);
41
+ background-color: var(--form-input-bg, white);
42
+ color: var(--form-input-fg, black);
43
43
  font-size: 0.875rem;
44
44
  font-weight: 500;
45
45
  line-height: 1.25rem;
46
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
46
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
47
47
  user-select: none;
48
48
  white-space: nowrap;
49
49
  }
50
50
  input::placeholder {
51
- color: #b7b7b7;
51
+ color: var(--form-input-placeholder, #888);
52
52
  font-style: italic;
53
53
  }</style>
package/dist/forms/list-box/list-box.svelte CHANGED
@@ -106,13 +106,13 @@ div input {
106
106
  width: 100%;
107
107
  padding: 0.5rem 1rem;
108
108
  border-radius: 0.25rem;
109
- border: 1px solid #b7b7b7;
110
- background-color: #fff;
111
- color: #5c5c5c;
109
+ border: 1px solid var(--form-input-border, black);
110
+ background-color: var(--form-input-bg, white);
111
+ color: var(--form-input-fg, black);
112
112
  font-size: 0.875rem;
113
113
  font-weight: 500;
114
114
  line-height: 1.25rem;
115
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
115
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
116
116
  user-select: none;
117
117
  white-space: nowrap;
118
118
  }
@@ -129,7 +129,7 @@ div button.icon {
129
129
  height: 1rem;
130
130
  transition: transform 0.3s linear;
131
131
  z-index: 2;
132
- color: black;
132
+ color: var(--form-input-fg, black);
133
133
  transform: rotate(180deg);
134
134
  }
135
135
  div.open .icon {
package/dist/forms/number-box/number-box.svelte CHANGED
@@ -51,7 +51,7 @@ div .symbol {
51
51
  position: absolute;
52
52
  top: 0.32rem;
53
53
  left: 0.5rem;
54
- color: #000;
54
+ color: var(--form-input-fg, black);
55
55
  font-size: 1.125rem;
56
56
  line-height: 1.75rem;
57
57
  }
@@ -59,7 +59,7 @@ div .units {
59
59
  position: absolute;
60
60
  top: 0.32rem;
61
61
  right: 2.5rem;
62
- color: #888;
62
+ color: var(--form-input-fg, black);
63
63
  font-size: 1rem;
64
64
  line-height: 1.75rem;
65
65
  text-align: right;
@@ -68,13 +68,13 @@ div input {
68
68
  width: 100%;
69
69
  padding: 0.5rem 1rem;
70
70
  border-radius: 0.25rem;
71
- border: 1px solid #b7b7b7;
72
- background-color: #fff;
73
- color: #5c5c5c;
71
+ border: 1px solid var(--form-input-border, black);
72
+ background-color: var(--form-input-bg, white);
73
+ color: var(--form-input-fg, black);
74
74
  font-size: 0.875rem;
75
75
  font-weight: 500;
76
76
  line-height: 1.25rem;
77
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
77
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
78
78
  user-select: none;
79
79
  white-space: nowrap;
80
80
  }
package/dist/forms/radio-group/radio-box.svelte CHANGED
@@ -1,29 +1,66 @@
1
1
  <script>import { uniqueId } from "../../helpers/unique-id.js";
2
+ import CheckIcon from "../../icons/check-icon.svelte";
2
3
  export let value = void 0;
3
4
  export let group = void 0;
4
5
  export let disabled = false;
5
6
  const id = uniqueId();
6
7
  </script>
7
8
 
8
- <div>
9
+ <label>
9
10
  <input type="radio" bind:group {value} {disabled} {id} />
11
+ <span class="checkbox">
12
+ <span class="checkmark"><CheckIcon /></span>
13
+ </span>
10
14
  {#if $$slots.default}
11
- <label for={id}>
15
+ <div class="text">
12
16
  <slot />
13
- </label>
17
+ </div>
14
18
  {/if}
15
- </div>
19
+ </label>
16
20
 
17
- <style>div {
21
+ <style>label {
18
22
  display: flex;
19
23
  align-items: center;
20
24
  gap: 0.5rem;
21
25
  line-height: 2rem;
22
26
  font-size: 1rem;
23
- }
24
- div input {
25
27
  cursor: pointer;
26
28
  }
27
- div label {
28
- cursor: pointer;
29
+ label .checkbox {
30
+ position: relative;
31
+ width: 1.2rem;
32
+ height: 1.2rem;
33
+ border-radius: 0.6rem;
34
+ border: 1px solid var(--form-input-border, black);
35
+ background-color: var(--form-input-bg, white);
36
+ color: var(--form-input-fg, black);
37
+ font-size: 0.875rem;
38
+ font-weight: 500;
39
+ line-height: 1.25rem;
40
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
41
+ user-select: none;
42
+ display: flex;
43
+ align-items: center;
44
+ justify-content: center;
45
+ padding-top: 0.1rem;
46
+ }
47
+ label .checkbox .checkmark {
48
+ display: block;
49
+ width: 0;
50
+ height: 0;
51
+ color: var(--form-input-checked-fg, white);
52
+ fill: var(--form-input-checked-bg, #3182ce);
53
+ stroke: var(--form-input-checked-fg, white);
54
+ transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
55
+ }
56
+ label input {
57
+ width: 0;
58
+ height: 0;
59
+ }
60
+ label input:checked + .checkbox {
61
+ background-color: var(--form-input-checked-bg, #3182ce);
62
+ }
63
+ label input:checked + .checkbox .checkmark {
64
+ width: 100%;
65
+ height: 100%;
29
66
  }</style>
package/dist/forms/switch-box/switch-box.svelte CHANGED
@@ -35,7 +35,7 @@ label input {
35
35
  height: 0;
36
36
  }
37
37
  label .switch {
38
- background-color: var(--unchecked-color);
38
+ background-color: var(--form-input-bg, white);
39
39
  position: relative;
40
40
  cursor: pointer;
41
41
  transition: background-color 0.2s ease-in-out;
@@ -45,10 +45,13 @@ label .slider {
45
45
  border-radius: 50%;
46
46
  position: absolute;
47
47
  transition: left 0.2s ease-in-out;
48
- background: #fff;
48
+ background-color: var(--form-input-fg, black);
49
49
  }
50
50
  label.checked .switch {
51
- background-color: var(--checked-color);
51
+ background-color: var(--form-input-checked-bg, #3182ce);
52
+ }
53
+ label.checked .slider {
54
+ background-color: var(--form-input-checked-fg, white);
52
55
  }
53
56
  label.xl .switch {
54
57
  width: 4rem;
package/dist/forms/text-area/text-area.svelte CHANGED
@@ -22,13 +22,16 @@ export let readonly = false;
22
22
  width: 100%;
23
23
  padding: 0.5rem 1rem;
24
24
  border-radius: 0.25rem;
25
- border: 1px solid #b7b7b7;
26
- background-color: #fff;
27
- color: #5c5c5c;
25
+ border: 1px solid var(--form-input-border, black);
26
+ background-color: var(--form-input-bg, white);
27
+ color: var(--form-input-fg, black);
28
28
  font-size: 0.875rem;
29
29
  font-weight: 500;
30
30
  line-height: 1.25rem;
31
31
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
32
32
  user-select: none;
33
33
  white-space: nowrap;
34
+ }
35
+ textarea::placeholder {
36
+ color: var(--form-input-placeholder, #a0aec0);
34
37
  }</style>
package/dist/forms/text-box/text-box.svelte CHANGED
@@ -49,25 +49,25 @@ div input {
49
49
  width: 100%;
50
50
  padding: 0.5rem 1rem;
51
51
  border-radius: 0.25rem;
52
- border: 1px solid #b7b7b7;
53
- background-color: #fff;
54
- color: #5c5c5c;
52
+ border: 1px solid var(--form-input-border, black);
53
+ background-color: var(--form-input-bg, white);
54
+ color: var(--form-input-fg, black);
55
55
  font-size: 0.875rem;
56
56
  font-weight: 500;
57
57
  line-height: 1.25rem;
58
- transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
58
+ transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
59
59
  user-select: none;
60
60
  white-space: nowrap;
61
61
  }
62
62
  div input::placeholder {
63
- color: #b7b7b7;
63
+ color: var(--form-input-placeholder, #888);
64
64
  font-style: italic;
65
65
  }
66
66
  div .units {
67
67
  position: absolute;
68
68
  top: 0.32rem;
69
69
  right: 1rem;
70
- color: #888;
70
+ color: var(--form-input-fg, black);
71
71
  font-size: 1rem;
72
72
  line-height: 1.75rem;
73
73
  text-align: right;
package/dist/navigation/app-bar/app-nav-item.svelte CHANGED
@@ -1,19 +1,28 @@
1
- <script>import { getContext } from "svelte";
2
- export let href;
1
+ <script>import { navigateTo } from "../../index.js";
2
+ import { createEventDispatcher, getContext } from "svelte";
3
+ export let href = void 0;
3
4
  export let title;
5
+ const dispatch = createEventDispatcher();
4
6
  const open = getContext("app-nav-state");
7
+ const click = () => {
8
+ if (href)
9
+ navigateTo(href);
10
+ dispatch("click");
11
+ };
5
12
  </script>
6
13
 
7
- <a {href} class={$open ? 'open' : 'closed'}>
14
+ <button class={$open ? 'open' : 'closed'} on:click={click}>
8
15
  {#if $$slots.default}
9
16
  <div class="icon">
10
17
  <slot />
11
18
  </div>
12
19
  {/if}
13
- <div class="title">{title}</div>
14
- </a>
20
+ <div class="title">
21
+ {title}
22
+ </div>
23
+ </button>
15
24
 
16
- <style>a {
25
+ <style>button {
17
26
  display: flex;
18
27
  flex-direction: column;
19
28
  gap: 0.2rem;
@@ -21,31 +30,36 @@ const open = getContext("app-nav-state");
21
30
  height: 100%;
22
31
  color: var(--nav-link-color, black);
23
32
  text-decoration: none;
33
+ appearance: none;
34
+ border: none;
35
+ background-color: transparent;
36
+ cursor: pointer;
24
37
  }
25
- a:hover {
38
+ button:hover {
26
39
  color: var(--nav-link-hover-color, black);
27
40
  text-decoration: underline;
28
41
  }
29
- a .icon {
42
+ button .icon {
30
43
  width: 100%;
31
44
  height: 1.5rem;
32
45
  }
33
46
 
34
47
  @media (max-width: 640px) {
35
- a.open {
48
+ button.open {
36
49
  flex-direction: row;
37
50
  gap: 1rem;
38
51
  width: 100%;
39
52
  padding: 1rem;
53
+ text-align: left;
40
54
  }
41
- a.open:hover {
55
+ button.open:hover {
42
56
  text-decoration: none;
43
57
  background-color: #bbb;
44
58
  }
45
- a.open .title {
59
+ button.open .title {
46
60
  flex-grow: 1;
47
61
  }
48
- a.open .icon {
62
+ button.open .icon {
49
63
  width: 1.5rem;
50
64
  }
51
65
  }</style>
package/dist/navigation/app-bar/app-nav-item.svelte.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  import { SvelteComponent } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- href: string;
4
+ href?: string | undefined;
5
5
  title: string;
6
6
  };
7
7
  events: {
8
+ click: CustomEvent<void>;
9
+ } & {
8
10
  [evt: string]: CustomEvent<any>;
9
11
  };
10
12
  slots: {
package/dist/navigation/side-bar/side-bar.svelte CHANGED
@@ -11,19 +11,21 @@ export let open = false;
11
11
 
12
12
  <style>div aside {
13
13
  width: 300px;
14
- padding: 0 1rem;
15
- margin: 0 auto;
14
+ padding: 0;
15
+ margin: 0;
16
16
  box-sizing: border-box;
17
17
  position: fixed;
18
18
  top: 0;
19
19
  left: -300px;
20
20
  bottom: 0;
21
- background: #fff;
22
- color: #000;
21
+ background: var(--nav-bg, white);
22
+ color: var(--nav-fg, black);
23
23
  z-index: 9999;
24
24
  transition: left 0.3s ease-in-out;
25
25
  border-right: solid 1px #e5e5e5;
26
26
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
27
+ display: flex;
28
+ flex-direction: column;
27
29
  }
28
30
  div.open {
29
31
  display: block;
package/dist/types/form.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export type FormFieldSizeOptions = 'sm' | 'md' | 'lg' | 'xl' | 'full';
2
- export type ButtonStyle = 'positive' | 'primary' | 'secondary' | 'tertiary' | 'negative' | 'danger' | 'ghost' | 'link';
2
+ export type ButtonStyle = 'primary' | 'secondary' | 'positive' | 'negative' | 'danger' | 'ghost' | 'outline' | 'link';
3
3
  export type DropdownOption = {
4
4
  value: string;
5
5
  name: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sveltacular",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "scripts": {
5
5
  "watch": "npm run dev -- --open",
6
6
  "dev": "vite dev",