@sveltia/ui 0.18.2 → 0.19.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.
Files changed (11) hide show
  1. package/package/components/button/button.svelte +1 -1
  2. package/package/components/button/select-button-group.svelte +4 -2
  3. package/package/components/grid/grid-body.svelte +1 -1
  4. package/package/components/switch/switch.svelte +1 -1
  5. package/package/components/table/table-body.svelte +1 -1
  6. package/package/components/text-field/text-area.svelte +2 -1
  7. package/package/components/text-field/text-input.svelte +4 -3
  8. package/package/components/util/app-shell.svelte +7 -7
  9. package/package/styles/core.scss +6 -6
  10. package/package/styles/variables.scss +2 -2
  11. package/package.json +9 -9
package/package/components/button/button.svelte CHANGED
@@ -110,7 +110,7 @@
110
110
  font-size: var(--sui-control-font-size);
111
111
  line-height: var(--sui-control-line-height);
112
112
  font-weight: normal;
113
- text-align: left;
113
+ text-align: start;
114
114
  white-space: nowrap;
115
115
  cursor: pointer;
116
116
  transition: all 200ms;
package/package/components/button/select-button-group.svelte CHANGED
@@ -72,13 +72,15 @@
72
72
  color: var(--sui-primary-foreground-color);
73
73
  }
74
74
  .select-button-group :global(button):first-child {
75
- border-radius: 4px 0 0 4px !important;
75
+ border-top-left-radius: 4px !important;
76
+ border-bottom-left-radius: 4px !important;
76
77
  }
77
78
  .select-button-group :global(button):not(:first-child) {
78
79
  border-left-width: 0;
79
80
  }
80
81
  .select-button-group :global(button):last-child {
81
- border-radius: 0 4px 4px 0 !important;
82
+ border-top-right-radius: 4px !important;
83
+ border-bottom-right-radius: 4px !important;
82
84
  }
83
85
  .select-button-group :global(button[aria-checked="true"]) {
84
86
  color: var(--sui-highlight-foreground-color);
package/package/components/grid/grid-body.svelte CHANGED
@@ -61,5 +61,5 @@
61
61
  color: var(--sui-secondary-foreground-color);
62
62
  background-color: var(--sui-secondary-background-color);
63
63
  font-size: var(--sui-font-size-default);
64
- text-align: left;
64
+ text-align: start;
65
65
  }</style>
package/package/components/switch/switch.svelte CHANGED
@@ -85,7 +85,7 @@
85
85
  font-family: var(--sui-control-font-family);
86
86
  font-size: var(--sui-control-font-size);
87
87
  line-height: var(--sui-control-line-height);
88
- text-align: left;
88
+ text-align: start;
89
89
  cursor: pointer;
90
90
  -webkit-user-select: none;
91
91
  user-select: none;
package/package/components/table/table-body.svelte CHANGED
@@ -60,5 +60,5 @@
60
60
  color: var(--sui-secondary-foreground-color);
61
61
  background-color: var(--sui-secondary-background-color);
62
62
  font-size: var(--sui-font-size-default);
63
- text-align: left;
63
+ text-align: start;
64
64
  }</style>
package/package/components/text-field/text-area.svelte CHANGED
@@ -60,6 +60,7 @@
60
60
  {...restProps}
61
61
  {name}
62
62
  bind:value
63
+ dir="auto"
63
64
  disabled={disabled || undefined}
64
65
  readonly={readonly || undefined}
65
66
  aria-hidden={hidden}
@@ -106,7 +107,7 @@ textarea,
106
107
  font-size: var(--sui-textbox-font-size);
107
108
  line-height: var(--sui-textbox-multiline-line-height);
108
109
  font-weight: var(--sui-textbox-font-weight, normal);
109
- text-align: var(--sui-textbox-text-align, left);
110
+ text-align: var(--sui-textbox-text-align, start);
110
111
  text-indent: var(--sui-textbox-text-indent, 0);
111
112
  text-transform: var(--sui-textbox-text-transform, none);
112
113
  letter-spacing: var(--sui-textbox-letter-spacing, normal);
package/package/components/text-field/text-input.svelte CHANGED
@@ -51,6 +51,7 @@
51
51
  bind:value
52
52
  type="text"
53
53
  {role}
54
+ dir="auto"
54
55
  name={name || undefined}
55
56
  tabindex={disabled ? -1 : 0}
56
57
  disabled={disabled || undefined}
@@ -104,7 +105,7 @@ input {
104
105
  font-size: var(--sui-textbox-font-size);
105
106
  line-height: var(--sui-textbox-singleline-line-height);
106
107
  font-weight: var(--sui-textbox-font-weight, normal);
107
- text-align: var(--sui-textbox-text-align, left);
108
+ text-align: var(--sui-textbox-text-align, start);
108
109
  text-indent: var(--sui-textbox-text-indent, 0);
109
110
  text-transform: var(--sui-textbox-text-transform, none);
110
111
  letter-spacing: var(--sui-textbox-letter-spacing, normal);
@@ -147,7 +148,7 @@ input ~ :global(button) :global(.icon) {
147
148
  z-index: 2;
148
149
  display: flex;
149
150
  align-items: center;
150
- justify-content: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, left));
151
+ justify-content: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, start));
151
152
  white-space: nowrap;
152
153
  pointer-events: none;
153
154
  }
@@ -167,7 +168,7 @@ input::placeholder,
167
168
  font-size: var(--sui-textbox-placeholder-font-size, var(--sui-textbox-font-size));
168
169
  line-height: var(--sui-textbox-placeholder-singleline-line-height, var(--sui-textbox-singleline-line-height));
169
170
  font-weight: var(--sui-textbox-placeholder-font-weight, var(--sui-textbox-font-weight, normal));
170
- text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, left));
171
+ text-align: var(--sui-textbox-placeholder-text-align, var(--sui-textbox-text-align, start));
171
172
  text-indent: var(--sui-textbox-placeholder-text-indent, var(--sui-textbox-text-indent, 0));
172
173
  letter-spacing: var(--sui-textbox-placeholder-letter-spacing, var(--sui-textbox-letter-spacing, normal));
173
174
  }</style>
package/package/components/util/app-shell.svelte CHANGED
@@ -98,7 +98,7 @@
98
98
  {@render children?.()}
99
99
  </div>
100
100
 
101
- <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");
101
+ <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
102
102
  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
103
103
  :global(:root),
104
104
  :global(:host) {
@@ -181,8 +181,8 @@
181
181
  --sui-font-size-default: 13px;
182
182
  --sui-font-size-small: 11px;
183
183
  --sui-font-size-x-small: 9px;
184
- --sui-font-weight-normal: 300;
185
- --sui-font-weight-bold: 600;
184
+ --sui-font-weight-normal: 325;
185
+ --sui-font-weight-bold: 625;
186
186
  --sui-font-family-monospace: "Noto Sans Mono", monospace;
187
187
  --sui-font-size-monospace: 0.9em;
188
188
  --sui-line-height-default: 1.25;
@@ -521,7 +521,7 @@
521
521
 
522
522
  :global(ul),
523
523
  :global(ol) {
524
- padding-left: 2em;
524
+ padding-inline: 2em;
525
525
  }
526
526
 
527
527
  :global(code),
@@ -555,9 +555,9 @@
555
555
  }
556
556
 
557
557
  :global(blockquote) {
558
- margin-left: 16px;
559
- border-left: 4px solid var(--sui-textbox-border-color);
560
- padding-left: 12px;
558
+ margin-inline: 16px 0;
559
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
560
+ padding-inline-start: 12px;
561
561
  }
562
562
 
563
563
  :global(.disabled),
package/package/styles/core.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use "variables.scss";
2
2
 
3
- // https://fonts.google.com/share?selection.family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600|Noto+Sans+Mono
4
- @import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300;1,600&family=Noto+Sans+Mono&display=swap");
3
+ // https://fonts.google.com/share?selection.family=Merriweather+Sans:ital,wght@0,300..800;1,300..800|Noto+Sans+Mono:wght@100..900
4
+ @import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Noto+Sans+Mono:wght@100..900&display=swap");
5
5
  // https://fonts.google.com/icons?icon.set=Material+Symbols
6
6
  // Use `font-display: block;` @see https://stackoverflow.com/q/41710834
7
7
  @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
@@ -117,7 +117,7 @@ li {
117
117
 
118
118
  ul,
119
119
  ol {
120
- padding-left: 2em;
120
+ padding-inline: 2em;
121
121
  }
122
122
 
123
123
  code,
@@ -151,9 +151,9 @@ td {
151
151
  }
152
152
 
153
153
  blockquote {
154
- margin-left: 16px;
155
- border-left: 4px solid var(--sui-textbox-border-color);
156
- padding-left: 12px;
154
+ margin-inline: 16px 0;
155
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
156
+ padding-inline-start: 12px;
157
157
  }
158
158
 
159
159
  .disabled,
package/package/styles/variables.scss CHANGED
@@ -158,8 +158,8 @@
158
158
  --sui-font-size-default: 13px;
159
159
  --sui-font-size-small: 11px;
160
160
  --sui-font-size-x-small: 9px;
161
- --sui-font-weight-normal: 300;
162
- --sui-font-weight-bold: 600;
161
+ --sui-font-weight-normal: 325; // Merriweather Sans is a little bit bold, so we need to adjust the weight
162
+ --sui-font-weight-bold: 625; // ditto
163
163
  --sui-font-family-monospace: "Noto Sans Mono", monospace;
164
164
  --sui-font-size-monospace: 0.9em;
165
165
  --sui-line-height-default: 1.25;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.18.2",
3
+ "version": "0.19.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -45,31 +45,31 @@
45
45
  "svelte": "^5.0.0"
46
46
  },
47
47
  "devDependencies": {
48
- "@playwright/test": "^1.48.0",
48
+ "@playwright/test": "^1.48.1",
49
49
  "@sveltejs/adapter-auto": "^3.2.5",
50
50
  "@sveltejs/kit": "^2.7.1",
51
51
  "@sveltejs/package": "^2.3.5",
52
52
  "@sveltejs/vite-plugin-svelte": "4.0.0-next.8",
53
- "cspell": "^8.15.2",
53
+ "cspell": "^8.15.3",
54
54
  "eslint": "^8.57.1",
55
55
  "eslint-config-airbnb-base": "^15.0.0",
56
56
  "eslint-config-prettier": "^9.1.0",
57
57
  "eslint-plugin-import": "^2.31.0",
58
- "eslint-plugin-jsdoc": "^50.4.1",
59
- "eslint-plugin-svelte": "^2.44.1",
58
+ "eslint-plugin-jsdoc": "^50.4.3",
59
+ "eslint-plugin-svelte": "^2.45.1",
60
60
  "postcss": "^8.4.47",
61
61
  "postcss-html": "^1.7.0",
62
62
  "prettier": "^3.3.3",
63
63
  "prettier-plugin-svelte": "^3.2.7",
64
- "sass": "^1.79.5",
64
+ "sass": "^1.80.1",
65
65
  "stylelint": "^16.10.0",
66
66
  "stylelint-config-recommended-scss": "^14.1.0",
67
- "stylelint-scss": "^6.7.0",
68
- "svelte": "5.0.0-next.265",
67
+ "stylelint-scss": "^6.8.1",
68
+ "svelte": "5.0.0-next.269",
69
69
  "svelte-check": "^4.0.5",
70
70
  "svelte-i18n": "^4.0.0",
71
71
  "svelte-preprocess": "^6.0.3",
72
- "tslib": "^2.7.0",
72
+ "tslib": "^2.8.0",
73
73
  "vite": "^5.4.9",
74
74
  "vitest": "^2.1.3"
75
75
  },