@sveltia/ui 0.10.5 → 0.10.6

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 (8) hide show
  1. package/LICENSE.txt +1 -1
  2. package/package/components/button/button.svelte +6 -6
  3. package/package/components/select/combobox.svelte +8 -2
  4. package/package/components/text-field/search-bar.svelte +1 -1
  5. package/package/components/util/app-shell.svelte +1 -1
  6. package/package/services/group.js +20 -9
  7. package/package/styles/variables.scss +1 -1
  8. package/package.json +18 -18
package/LICENSE.txt CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2023 Kohei Yoshino.
3
+ Copyright (c) 2024 Kohei Yoshino.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/package/components/button/button.svelte CHANGED
@@ -231,11 +231,11 @@ button:global(.primary) {
231
231
  font-weight: var(--sui-button-primary-font-weight, normal);
232
232
  }
233
233
  button:global(.primary):hover, button:global(.primary):focus-visible, button:global(.primary)[aria-expanded=true] {
234
- color: var(--sui-button-primary-foreground-color-focus);
234
+ color: var(--sui-button-primary-foreground-color-focus, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
235
235
  background-color: var(--sui-button-primary-background-color-focus, var(--sui-primary-accent-color-light));
236
236
  }
237
237
  button:global(.primary):active {
238
- color: var(--sui-button-primary-foreground-color-active);
238
+ color: var(--sui-button-primary-foreground-color-active, var(--sui-button-primary-foreground-color, var(--sui-primary-accent-color-inverted)));
239
239
  background-color: var(--sui-button-primary-background-color-active, var(--sui-primary-accent-color-dark));
240
240
  }
241
241
  button:global(.secondary) {
@@ -247,11 +247,11 @@ button:global(.secondary) {
247
247
  font-weight: var(--sui-button-secondary-font-weight, normal);
248
248
  }
249
249
  button:global(.secondary):hover, button:global(.secondary):focus-visible, button:global(.secondary)[aria-expanded=true] {
250
- color: var(--sui-button-secondary-foreground-color-focus);
250
+ color: var(--sui-button-secondary-foreground-color-focus, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
251
251
  background-color: var(--sui-button-secondary-background-color-focus, var(--sui-hover-background-color));
252
252
  }
253
253
  button:global(.secondary):active {
254
- color: var(--sui-button-secondary-foreground-color-active);
254
+ color: var(--sui-button-secondary-foreground-color-active, var(--sui-button-secondary-foreground-color, var(--sui-primary-accent-color-text)));
255
255
  background-color: var(--sui-button-secondary-background-color-active, var(--sui-active-background-color));
256
256
  }
257
257
  button:global(.secondary)[aria-pressed=true] {
@@ -267,11 +267,11 @@ button:global(.tertiary) {
267
267
  font-weight: var(--sui-button-tertiary-font-weight, normal);
268
268
  }
269
269
  button:global(.tertiary):hover, button:global(.tertiary):focus-visible, button:global(.tertiary)[aria-expanded=true] {
270
- color: var(--sui-button-tertiary-foreground-color-focus);
270
+ color: var(--sui-button-tertiary-foreground-color-focus, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
271
271
  background-color: var(--sui-button-tertiary-background-color-focus, var(--sui-hover-background-color));
272
272
  }
273
273
  button:global(.tertiary):active {
274
- color: var(--sui-button-tertiary-foreground-color-active);
274
+ color: var(--sui-button-tertiary-foreground-color-active, var(--sui-button-tertiary-foreground-color, var(--sui-highlight-foreground-color)));
275
275
  background-color: var(--sui-button-tertiary-background-color-active, var(--sui-active-background-color));
276
276
  }
277
277
  button:global(.tertiary)[aria-pressed=true] {
package/package/components/select/combobox.svelte CHANGED
@@ -100,7 +100,13 @@
100
100
  }
101
101
  </script>
102
102
 
103
- <div role="none" class="sui combobox {className}" hidden={hidden || undefined} {...$$restProps}>
103
+ <div
104
+ role="none"
105
+ class="sui combobox {className}"
106
+ class:editable
107
+ hidden={hidden || undefined}
108
+ {...$$restProps}
109
+ >
104
110
  {#if !editable}
105
111
  <div
106
112
  role="combobox"
@@ -206,7 +212,7 @@
206
212
  border-top-left-radius: 0;
207
213
  border-bottom-left-radius: 0;
208
214
  }
209
- .combobox.readonly > :global(button) {
215
+ .combobox:not(.editable) > :global(button) {
210
216
  background-color: transparent !important;
211
217
  }
212
218
  .combobox > :global(button[tabindex="-1"]) {
package/package/components/text-field/search-bar.svelte CHANGED
@@ -163,7 +163,7 @@
163
163
  height: var(--sui-button-medium-height);
164
164
  }
165
165
  .search-bar :global(.label) {
166
- inset: 0 36px;
166
+ --sui-textbox-padding: 0 36px;
167
167
  }
168
168
  .search-bar :global(.text-input) {
169
169
  flex: auto;
package/package/components/util/app-shell.svelte CHANGED
@@ -112,7 +112,7 @@
112
112
  var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
113
113
  var(--sui-alert-foreground-color-lightness)
114
114
  );
115
- --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 50%);
115
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
116
116
  --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
117
117
  --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
118
118
  --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
package/package/services/group.js CHANGED
@@ -61,7 +61,6 @@ class Group {
61
61
 
62
62
  this.parent = parent;
63
63
  this.role = /** @type {string} */ (parent.getAttribute('role'));
64
- this.grid = this.role === 'listbox' && parent.matches('.grid');
65
64
  this.multi = this.parent.getAttribute('aria-multiselectable') === 'true';
66
65
  this.id = getRandomId(this.role);
67
66
  this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
@@ -112,9 +111,7 @@ class Group {
112
111
  });
113
112
 
114
113
  parent.addEventListener('click', (event) => {
115
- if (/** @type {HTMLElement} */ (event.target).matches(this.selector)) {
116
- this.onClick(event);
117
- }
114
+ this.onClick(event);
118
115
  });
119
116
 
120
117
  parent.addEventListener('keydown', (event) => {
@@ -176,6 +173,14 @@ class Group {
176
173
  return this.parent.matches('[aria-readonly="true"]');
177
174
  }
178
175
 
176
+ /**
177
+ * Whether the widget is displayed in grid mode.
178
+ * @type {boolean}
179
+ */
180
+ get grid() {
181
+ return this.role === 'grid' || (this.role === 'listbox' && this.parent.matches('.grid'));
182
+ }
183
+
179
184
  /**
180
185
  * Select (and move focus to) the given target.
181
186
  * @param {(MouseEvent | KeyboardEvent)} event - Triggered event.
@@ -241,11 +246,14 @@ class Group {
241
246
  }
242
247
 
243
248
  if (this.focusChild) {
244
- element.tabIndex = isTarget ? 0 : -1;
249
+ // Wait a bit before the element is rerendered
250
+ window.requestAnimationFrame(() => {
251
+ element.tabIndex = isTarget ? 0 : -1;
245
252
 
246
- if (isTarget) {
247
- element.focus();
248
- }
253
+ if (isTarget) {
254
+ element.focus();
255
+ }
256
+ });
249
257
  } else {
250
258
  element.classList.toggle('focused', isTarget);
251
259
  }
@@ -299,7 +307,10 @@ class Group {
299
307
  onClick(event) {
300
308
  // eslint-disable-next-line prefer-destructuring
301
309
  const target = /** @type {HTMLElement} */ (event.target);
302
- const newTarget = target.matches(this.selector) ? target : undefined;
310
+
311
+ const newTarget = target.matches(this.selector)
312
+ ? target
313
+ : /** @type {HTMLElement | null} */ (target.closest(this.selector));
303
314
 
304
315
  if (!newTarget || event.button !== 0) {
305
316
  return;
package/package/styles/variables.scss CHANGED
@@ -97,7 +97,7 @@
97
97
  var(--sui-alert-foreground-color-lightness)
98
98
  );
99
99
  // Background
100
- --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 50%);
100
+ --sui-hover-background-color: hsl(var(--sui-background-color-5-hsl) / 35%);
101
101
  --sui-selected-background-color: hsl(var(--sui-background-color-5-hsl) / 75%);
102
102
  --sui-active-background-color: hsl(var(--sui-background-color-5-hsl) / 100%);
103
103
  --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sveltia/ui",
3
- "version": "0.10.5",
3
+ "version": "0.10.6",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -23,36 +23,36 @@
23
23
  "test:unit": "vitest"
24
24
  },
25
25
  "dependencies": {
26
- "svelte": "^4.2.9"
26
+ "svelte": "^4.2.12"
27
27
  },
28
28
  "devDependencies": {
29
- "@playwright/test": "^1.41.1",
29
+ "@playwright/test": "^1.42.1",
30
30
  "@sveltejs/adapter-auto": "^3.1.1",
31
- "@sveltejs/kit": "^2.4.1",
32
- "@sveltejs/package": "^2.2.6",
33
- "@sveltejs/vite-plugin-svelte": "^3.0.1",
34
- "cspell": "^8.3.2",
35
- "eslint": "^8.56.0",
31
+ "@sveltejs/kit": "^2.5.3",
32
+ "@sveltejs/package": "^2.3.0",
33
+ "@sveltejs/vite-plugin-svelte": "^3.0.2",
34
+ "cspell": "^8.6.0",
35
+ "eslint": "^8.57.0",
36
36
  "eslint-config-airbnb-base": "^15.0.0",
37
37
  "eslint-config-prettier": "^9.1.0",
38
38
  "eslint-plugin-import": "^2.29.1",
39
- "eslint-plugin-jsdoc": "^48.0.2",
39
+ "eslint-plugin-jsdoc": "^48.2.1",
40
40
  "eslint-plugin-svelte": "^2.35.1",
41
41
  "npm-run-all": "^4.1.5",
42
- "postcss": "^8.4.33",
42
+ "postcss": "^8.4.35",
43
43
  "postcss-html": "^1.6.0",
44
- "prettier": "^3.2.4",
45
- "prettier-plugin-svelte": "^3.1.2",
46
- "sass": "^1.70.0",
47
- "stylelint": "^16.2.0",
44
+ "prettier": "^3.2.5",
45
+ "prettier-plugin-svelte": "^3.2.2",
46
+ "sass": "^1.71.1",
47
+ "stylelint": "^16.2.1",
48
48
  "stylelint-config-recommended-scss": "^14.0.0",
49
- "stylelint-scss": "^6.0.0",
50
- "svelte-check": "^3.6.3",
49
+ "stylelint-scss": "^6.2.1",
50
+ "svelte-check": "^3.6.6",
51
51
  "svelte-i18n": "^4.0.0",
52
52
  "svelte-preprocess": "^5.1.3",
53
53
  "tslib": "^2.6.2",
54
- "vite": "^5.0.12",
55
- "vitest": "^1.2.1"
54
+ "vite": "^5.1.5",
55
+ "vitest": "^1.3.1"
56
56
  },
57
57
  "exports": {
58
58
  "./package.json": "./package.json",