@sveltia/ui 0.18.2 → 0.19.1

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 (15) hide show
  1. package/package/components/button/button.svelte +6 -6
  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/menu/menu-item.svelte +1 -1
  5. package/package/components/switch/switch.svelte +1 -1
  6. package/package/components/table/table-body.svelte +1 -1
  7. package/package/components/tabs/tab-list.svelte +1 -1
  8. package/package/components/text-field/text-area.svelte +3 -2
  9. package/package/components/text-field/text-input.svelte +5 -4
  10. package/package/components/toast/toast.svelte +1 -1
  11. package/package/components/toolbar/toolbar.svelte +1 -1
  12. package/package/components/util/app-shell.svelte +10 -10
  13. package/package/styles/core.scss +8 -8
  14. package/package/styles/variables.scss +2 -2
  15. package/package.json +9 -9
package/package/components/button/button.svelte CHANGED
@@ -109,8 +109,8 @@
109
109
  font-family: var(--sui-control-font-family);
110
110
  font-size: var(--sui-control-font-size);
111
111
  line-height: var(--sui-control-line-height);
112
- font-weight: normal;
113
- text-align: left;
112
+ font-weight: var(--sui-font-weight-normal, normal);
113
+ text-align: start;
114
114
  white-space: nowrap;
115
115
  cursor: pointer;
116
116
  transition: all 200ms;
@@ -137,7 +137,7 @@ button:global(.primary) {
137
137
  border-color: var(--sui-button-primary-border-color, var(--sui-primary-accent-color));
138
138
  color: var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted));
139
139
  background-color: var(--sui-button-primary-background-color, var(--sui-primary-accent-color));
140
- font-weight: var(--sui-button-primary-font-weight, normal);
140
+ font-weight: var(--sui-button-primary-font-weight, var(--sui-font-weight-normal, normal));
141
141
  }
142
142
  button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
143
143
  color: var(--sui-button-primary-foreground-color-focus, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
@@ -153,7 +153,7 @@ button:global(.secondary) {
153
153
  border-color: var(--sui-button-secondary-border-color, var(--sui-primary-accent-color));
154
154
  color: var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text));
155
155
  background-color: var(--sui-button-secondary-background-color, var(--sui-button-background-color));
156
- font-weight: var(--sui-button-secondary-font-weight, normal);
156
+ font-weight: var(--sui-button-secondary-font-weight, var(--sui-font-weight-normal, normal));
157
157
  }
158
158
  button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
159
159
  color: var(--sui-button-secondary-foreground-color-focus, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
@@ -173,7 +173,7 @@ button:global(.tertiary) {
173
173
  border-color: var(--sui-button-tertiary-border-color, var(--sui-button-border-color));
174
174
  color: var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color));
175
175
  background-color: var(--sui-button-tertiary-background-color, var(--sui-button-background-color));
176
- font-weight: var(--sui-button-tertiary-font-weight, normal);
176
+ font-weight: var(--sui-button-tertiary-font-weight, var(--sui-font-weight-normal, normal));
177
177
  }
178
178
  button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
179
179
  color: var(--sui-button-tertiary-foreground-color-focus, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
@@ -188,7 +188,7 @@ button:global(.tertiary)[aria-pressed=true] {
188
188
  background-color: var(--sui-button-tertiary-background-color-pressed, var(--sui-selected-background-color));
189
189
  }
190
190
  button:global(.ghost) {
191
- font-weight: var(--sui-button-ghost-font-weight, normal);
191
+ font-weight: var(--sui-button-ghost-font-weight, var(--sui-font-weight-normal, normal));
192
192
  }
193
193
  button:global(.ghost):hover, button:global(.ghost):focus-visible, button:global(.ghost)[aria-expanded=true] {
194
194
  color: var(--sui-button-ghost-foreground-color-focus);
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/menu/menu-item.svelte CHANGED
@@ -114,7 +114,7 @@
114
114
  color: var(--sui-menuitem-foreground-color, var(--sui-control-foreground-color, inherit));
115
115
  background-color: var(--sui-menuitem-background-color, transparent);
116
116
  font-size: var(--sui-menuitem-font-size, var(--sui-option-font-size));
117
- font-weight: var(--sui-menuitem-font-weight, var(--sui-option-font-weight));
117
+ font-weight: var(--sui-menuitem-font-weight, var(--sui-option-font-weight, normal));
118
118
  }
119
119
  .menuitem :global(button[aria-checked="true"]) :global(.icon) {
120
120
  color: var(--sui-primary-accent-color-text);
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/tabs/tab-list.svelte CHANGED
@@ -161,7 +161,7 @@
161
161
  border-radius: var(--sui-tab-border-radius, 0);
162
162
  font-family: var(--sui-tab-font-family, var(--sui-control-font-family, inherit));
163
163
  font-size: var(--sui-tab-font-size, var(--sui-control-font-size, inherit));
164
- font-weight: var(--sui-tab-font-weight, var(--sui-control-font-weight, inherit));
164
+ font-weight: var(--sui-tab-font-weight, var(--sui-control-font-weight, normal));
165
165
  }
166
166
 
167
167
  .inner {
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}
@@ -105,8 +106,8 @@ textarea,
105
106
  font-family: var(--sui-textbox-font-family);
106
107
  font-size: var(--sui-textbox-font-size);
107
108
  line-height: var(--sui-textbox-multiline-line-height);
108
- font-weight: var(--sui-textbox-font-weight, normal);
109
- text-align: var(--sui-textbox-text-align, left);
109
+ font-weight: var(--sui-textbox-font-weight, var(--sui-font-weight-normal, normal));
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}
@@ -103,8 +104,8 @@ input {
103
104
  font-family: var(--sui-textbox-font-family);
104
105
  font-size: var(--sui-textbox-font-size);
105
106
  line-height: var(--sui-textbox-singleline-line-height);
106
- font-weight: var(--sui-textbox-font-weight, normal);
107
- text-align: var(--sui-textbox-text-align, left);
107
+ font-weight: var(--sui-textbox-font-weight, var(--sui-font-weight-normal, normal));
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/toast/toast.svelte CHANGED
@@ -121,7 +121,7 @@
121
121
  background-color: transparent;
122
122
  font-family: var(--sui-font-family-default);
123
123
  font-size: var(--sui-font-size-default);
124
- font-weight: var(--sui-font-weight-normal);
124
+ font-weight: var(--sui-font-weight-normal, normal);
125
125
  pointer-events: none;
126
126
  -webkit-user-select: none;
127
127
  user-select: none;
package/package/components/toolbar/toolbar.svelte CHANGED
@@ -95,7 +95,7 @@
95
95
  }
96
96
  [role=toolbar] :global(h2) :global(span) {
97
97
  font-size: var(--sui-font-size-small);
98
- font-weight: normal;
98
+ font-weight: var(--sui-font-weight-normal, normal);
99
99
  opacity: 0.8;
100
100
  }
101
101
  [role=toolbar] :global(.divider[aria-orientation="horizontal"]) {
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;
@@ -469,7 +469,7 @@
469
469
  :global(h5),
470
470
  :global(h6) {
471
471
  margin: 0;
472
- font-weight: var(--sui-font-weight-bold);
472
+ font-weight: var(--sui-font-weight-bold, bold);
473
473
  line-height: var(--sui-line-height-default);
474
474
  }
475
475
 
@@ -498,7 +498,7 @@
498
498
  }
499
499
 
500
500
  :global(strong) {
501
- font-weight: var(--sui-font-weight-bold);
501
+ font-weight: var(--sui-font-weight-bold, bold);
502
502
  }
503
503
 
504
504
  :global(a) {
@@ -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),
@@ -606,7 +606,7 @@
606
606
  background-color: var(--sui-primary-background-color);
607
607
  font-family: var(--sui-font-family-default);
608
608
  font-size: var(--sui-font-size-default);
609
- font-weight: var(--sui-font-weight-normal);
609
+ font-weight: var(--sui-font-weight-normal, normal);
610
610
  word-spacing: var(--sui-word-spacing-normal);
611
611
  -webkit-user-select: none;
612
612
  user-select: none;
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");
@@ -60,7 +60,7 @@ h4,
60
60
  h5,
61
61
  h6 {
62
62
  margin: 0;
63
- font-weight: var(--sui-font-weight-bold);
63
+ font-weight: var(--sui-font-weight-bold, bold);
64
64
  line-height: var(--sui-line-height-default);
65
65
  }
66
66
 
@@ -89,7 +89,7 @@ h6 {
89
89
  }
90
90
 
91
91
  strong {
92
- font-weight: var(--sui-font-weight-bold);
92
+ font-weight: var(--sui-font-weight-bold, bold);
93
93
  }
94
94
 
95
95
  a {
@@ -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.1",
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.4",
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.2",
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
  },