@sveltia/ui 0.18.1 → 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 (13) 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/listbox/option.svelte +3 -0
  5. package/package/components/switch/switch.svelte +1 -1
  6. package/package/components/table/table-body.svelte +1 -1
  7. package/package/components/text-field/text-area.svelte +2 -1
  8. package/package/components/text-field/text-input.svelte +4 -3
  9. package/package/components/util/app-shell.svelte +10 -8
  10. package/package/components/util/modal.svelte +1 -0
  11. package/package/styles/core.scss +7 -6
  12. package/package/styles/variables.scss +5 -4
  13. package/package.json +12 -12
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/listbox/option.svelte CHANGED
@@ -112,6 +112,9 @@
112
112
  .option :global(button:active) {
113
113
  background-color: var(--sui-active-background-color);
114
114
  }
115
+ .option :global(.icon.check) {
116
+ margin: -2px;
117
+ }
115
118
  .option :global(button[aria-selected="true"]) :global(.icon) {
116
119
  color: var(--sui-primary-accent-color-text);
117
120
  }</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,14 +181,15 @@
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;
189
189
  --sui-line-height-compact: 1.5;
190
190
  --sui-line-height-comfortable: 1.75;
191
191
  --sui-word-spacing-normal: 0.1ex;
192
+ --sui-paragraph-margin: 1.75em;
192
193
  --sui-control-small-border-width: 1px;
193
194
  --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
194
195
  --sui-control-small-padding: 0 calc((var(--sui-control-small-height) / 5));
@@ -240,7 +241,7 @@
240
241
  --sui-textbox-singleline-padding: 0 8px;
241
242
  --sui-textbox-singleline-min-width: 240px;
242
243
  --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
243
- --sui-textbox-multiline-padding: 12px;
244
+ --sui-textbox-multiline-padding: 16px;
244
245
  --sui-textbox-multiline-min-width: 480px;
245
246
  --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
246
247
  --sui-tab-height: var(--sui-control-medium-height);
@@ -514,12 +515,13 @@
514
515
 
515
516
  :global(p),
516
517
  :global(li) {
518
+ margin: var(--sui-paragraph-margin) 0;
517
519
  line-height: var(--sui-line-height-comfortable);
518
520
  }
519
521
 
520
522
  :global(ul),
521
523
  :global(ol) {
522
- padding-left: 2em;
524
+ padding-inline: 2em;
523
525
  }
524
526
 
525
527
  :global(code),
@@ -553,9 +555,9 @@
553
555
  }
554
556
 
555
557
  :global(blockquote) {
556
- margin-left: 16px;
557
- border-left: 4px solid var(--sui-textbox-border-color);
558
- padding-left: 12px;
558
+ margin-inline: 16px 0;
559
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
560
+ padding-inline-start: 12px;
559
561
  }
560
562
 
561
563
  :global(.disabled),
package/package/components/util/modal.svelte CHANGED
@@ -220,5 +220,6 @@ dialog:not(.active) {
220
220
  pointer-events: none !important;
221
221
  }
222
222
  dialog:not(.active) :global(*) {
223
+ transition-duration: 0ms !important;
223
224
  pointer-events: none !important;
224
225
  }</style>
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");
@@ -111,12 +111,13 @@ a {
111
111
 
112
112
  p,
113
113
  li {
114
+ margin: var(--sui-paragraph-margin) 0;
114
115
  line-height: var(--sui-line-height-comfortable);
115
116
  }
116
117
 
117
118
  ul,
118
119
  ol {
119
- padding-left: 2em;
120
+ padding-inline: 2em;
120
121
  }
121
122
 
122
123
  code,
@@ -150,9 +151,9 @@ td {
150
151
  }
151
152
 
152
153
  blockquote {
153
- margin-left: 16px;
154
- border-left: 4px solid var(--sui-textbox-border-color);
155
- padding-left: 12px;
154
+ margin-inline: 16px 0;
155
+ border-inline-start: 4px solid var(--sui-textbox-border-color);
156
+ padding-inline-start: 12px;
156
157
  }
157
158
 
158
159
  .disabled,
package/package/styles/variables.scss CHANGED
@@ -149,7 +149,7 @@
149
149
  // Shadows
150
150
  --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
151
151
  --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
152
- // Fonts
152
+ // Text
153
153
  --sui-font-family-default: "Merriweather Sans", sans-serif;
154
154
  --sui-font-size-xxx-large: 23px;
155
155
  --sui-font-size-xx-large: 19px;
@@ -158,14 +158,15 @@
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;
166
166
  --sui-line-height-compact: 1.5;
167
167
  --sui-line-height-comfortable: 1.75;
168
168
  --sui-word-spacing-normal: 0.1ex;
169
+ --sui-paragraph-margin: 1.75em;
169
170
  // Controls
170
171
  --sui-control-small-border-width: 1px;
171
172
  --sui-control-small-border-radius: calc(var(--sui-control-small-height) / 8);
@@ -223,7 +224,7 @@
223
224
  --sui-textbox-singleline-padding: 0 8px;
224
225
  --sui-textbox-singleline-min-width: 240px;
225
226
  --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
226
- --sui-textbox-multiline-padding: 12px;
227
+ --sui-textbox-multiline-padding: 16px;
227
228
  --sui-textbox-multiline-min-width: 480px;
228
229
  --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
229
230
  // Tab
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.18.1",
3
+ "version": "0.19.0",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "repository": {
@@ -45,33 +45,33 @@
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
- "@sveltejs/kit": "^2.7.0",
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.1",
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.3.2",
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.264",
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",
73
- "vite": "^5.4.8",
74
- "vitest": "^2.1.2"
72
+ "tslib": "^2.8.0",
73
+ "vite": "^5.4.9",
74
+ "vitest": "^2.1.3"
75
75
  },
76
76
  "exports": {
77
77
  ".": {