@websline/system-components 1.0.8 → 1.0.9

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.
@@ -10,6 +10,7 @@
10
10
  * @property {boolean} [disabled=false] Whether the button is disabled
11
11
  * @property {boolean} [loading=false] Whether the button is in a loading state, for example after a form submission
12
12
  * @property {string} [icon=""] Icon name
13
+ * @property {number | undefined} [iconSize] Override the default icon size (size ==== large ? 24 : 16)
13
14
  * @property {"circle" | "square"} [shape="round"] Button shape
14
15
  * @property {"small" | "medium" | "large"} [size="medium"] Button size
15
16
  * @property {string} [type="button"] Button type, e.g. "button", "submit", "reset"
@@ -23,6 +24,7 @@
23
24
  color = "primary",
24
25
  disabled = false,
25
26
  icon = "",
27
+ iconSize,
26
28
  loading = false,
27
29
  shape = "circle",
28
30
  size = "medium",
@@ -64,6 +66,6 @@
64
66
  {#if loading}
65
67
  <Spinner size="small" />
66
68
  {:else}
67
- <Icon name={icon} size={size === "large" ? 24 : 16} />
69
+ <Icon name={icon} size={iconSize > 0 ? iconSize : (size === "large" ? 24 : 16)} />
68
70
  {/if}
69
71
  </svelte:element>
@@ -28,6 +28,10 @@ declare const IconButton: import("svelte").Component<{
28
28
  * Icon name
29
29
  */
30
30
  icon?: string;
31
+ /**
32
+ * Override the default icon size (size ==== large ? 24 : 16)
33
+ */
34
+ iconSize?: number | undefined;
31
35
  /**
32
36
  * Button shape
33
37
  */
@@ -70,6 +74,10 @@ type Props = {
70
74
  * Icon name
71
75
  */
72
76
  icon?: string;
77
+ /**
78
+ * Override the default icon size (size ==== large ? 24 : 16)
79
+ */
80
+ iconSize?: number | undefined;
73
81
  /**
74
82
  * Button shape
75
83
  */
@@ -58,7 +58,7 @@
58
58
 
59
59
  <style>
60
60
  input:checked::after {
61
- mask: url("/src/assets/masks/checkmark.svg");
61
+ mask: url("data:image/svg+xml,%3csvg height='16' width='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20 6L9 19L4 13.0909' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
62
62
  mask-size: contain;
63
63
  }
64
64
  </style>
@@ -90,13 +90,13 @@
90
90
  }
91
91
 
92
92
  &::after {
93
- mask: url("/src/assets/masks/chevron-down.svg");
93
+ mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 25' fill='none'%3e%3cpath d='M18 9.5332L12 15.5332L6 9.5332' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
94
94
  }
95
95
  }
96
96
 
97
97
  option {
98
98
  &::checkmark {
99
- mask: url("/src/assets/masks/checkmark.svg");
99
+ mask: url("data:image/svg+xml,%3csvg height='16' width='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20 6L9 19L4 13.0909' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e%3c/svg%3e");
100
100
  }
101
101
  }
102
102
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@websline/system-components",
3
- "version": "1.0.8",
3
+ "version": "1.0.9",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -26,16 +26,16 @@
26
26
  }
27
27
  },
28
28
  "dependencies": {
29
- "@tiptap/core": "^3.11.1",
30
- "@tiptap/extension-color": "^3.11.1",
31
- "@tiptap/extension-highlight": "^3.11.1",
32
- "@tiptap/extension-placeholder": "^3.11.1",
33
- "@tiptap/extension-text-align": "^3.11.1",
34
- "@tiptap/extension-text-style": "^3.11.1",
35
- "@tiptap/pm": "^3.11.1",
36
- "@tiptap/starter-kit": "^3.11.1",
29
+ "@tiptap/core": "^3.13.0",
30
+ "@tiptap/extension-color": "^3.13.0",
31
+ "@tiptap/extension-highlight": "^3.13.0",
32
+ "@tiptap/extension-placeholder": "^3.13.0",
33
+ "@tiptap/extension-text-align": "^3.13.0",
34
+ "@tiptap/extension-text-style": "^3.13.0",
35
+ "@tiptap/pm": "^3.13.0",
36
+ "@tiptap/starter-kit": "^3.13.0",
37
37
  "bits-ui": "^2.14.4",
38
- "dompurify": "^3.3.0",
38
+ "dompurify": "^3.3.1",
39
39
  "tailwind-variants": "^3.2.2",
40
40
  "uuid": "^13.0.0"
41
41
  },
@@ -45,35 +45,36 @@
45
45
  "devDependencies": {
46
46
  "@eslint/compat": "^2.0.0",
47
47
  "@eslint/js": "^9.39.1",
48
- "@storybook/addon-a11y": "^10.1.0",
49
- "@storybook/addon-docs": "^10.1.0",
48
+ "@storybook/addon-a11y": "^10.1.6",
49
+ "@storybook/addon-docs": "^10.1.6",
50
50
  "@storybook/addon-svelte-csf": "^5.0.10",
51
- "@storybook/sveltekit": "^10.1.0",
51
+ "@storybook/sveltekit": "^10.1.6",
52
52
  "@sveltejs/adapter-auto": "^7.0.0",
53
- "@sveltejs/kit": "^2.49.0",
53
+ "@sveltejs/kit": "^2.49.2",
54
54
  "@sveltejs/package": "^2.5.7",
55
55
  "@sveltejs/vite-plugin-svelte": "^6.2.1",
56
56
  "@tailwindcss/forms": "^0.5.10",
57
57
  "@tailwindcss/typography": "^0.5.19",
58
58
  "@tailwindcss/vite": "^4.1.17",
59
- "@types/node": "^24.10.1",
60
- "@vitest/browser": "^4.0.14",
59
+ "@types/node": "^24.10.2",
60
+ "@vitest/browser": "^4.0.15",
61
61
  "eslint": "^9.39.1",
62
62
  "eslint-config-prettier": "^10.1.8",
63
- "eslint-plugin-storybook": "^10.1.0",
64
- "eslint-plugin-svelte": "^3.13.0",
63
+ "eslint-plugin-storybook": "^10.1.6",
64
+ "eslint-plugin-svelte": "^3.13.1",
65
65
  "globals": "^16.5.0",
66
66
  "playwright": "^1.57.0",
67
- "prettier": "^3.7.1",
67
+ "postcss-url": "^10.1.3",
68
+ "prettier": "^3.7.4",
68
69
  "prettier-plugin-svelte": "^3.4.0",
69
70
  "prettier-plugin-tailwindcss": "^0.7.2",
70
- "publint": "^0.3.15",
71
- "storybook": "^10.1.0",
72
- "svelte": "^5.45.2",
71
+ "publint": "^0.3.16",
72
+ "storybook": "^10.1.6",
73
+ "svelte": "^5.45.8",
73
74
  "tailwindcss": "^4.1.17",
74
75
  "typescript": "^5.9.3",
75
- "vite": "^7.2.4",
76
- "vitest": "^4.0.14",
76
+ "vite": "^7.2.7",
77
+ "vitest": "^4.0.15",
77
78
  "vitest-browser-svelte": "^2.0.1"
78
79
  },
79
80
  "keywords": [