@sveltia/ui 0.22.6 → 0.23.1

package/dist/components/toolbar/toolbar.svelte

@@ -52,15 +52,11 @@
   flex: none !important;
   display: flex;
   align-items: center;
-  padding: 0 4px;
+  padding: 0 8px;
+  background-color: var(--toolbar-background-color, transparent);
 }
 [role=toolbar].primary {
   --toolbar-size: var(--sui-primary-toolbar-size);
-  border-color: var(--sui-primary-border-color);
-  background-color: var(--sui-secondary-background-color);
-}
-[role=toolbar].secondary {
-  background-color: var(--sui-tertiary-background-color);
 }
 [role=toolbar][aria-orientation=horizontal] {
   height: var(--toolbar-size);
@@ -69,23 +65,19 @@
   flex-direction: column;
   width: var(--toolbar-size);
 }
-[role=toolbar]:not(:last-child) {
-  border-width: 0 0 1px;
-  border-color: var(--sui-primary-border-color);
-}
 [role=toolbar] :global(button[role="button"][aria-pressed="true"]),
 [role=toolbar] :global(button[role="button"][aria-checked="true"]) {
   background-color: var(--sui-selected-background-color);
 }
 [role=toolbar] :global(h2) {
-  flex: auto;
+  flex: none;
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
-  padding: 0 8px;
+  padding: 0 12px;
   min-width: 0;
-  font-size: var(--sui-font-size-large);
+  font-size: var(--sui-font-size-x-large);
 }
 [role=toolbar] :global(h2) :global(strong) {
   display: block;

package/dist/components/util/app-shell.svelte

@@ -246,9 +246,9 @@
   --sui-tab-small-height: var(--sui-control-small-height);
   --sui-tab-medium-height: var(--sui-control-medium-height);
   --sui-tab-large-height: var(--sui-control-large-height);
-  --sui-primary-toolbar-size: 48px;
-  --sui-secondary-toolbar-size: 40px;
-  --sui-primary-row-height: 48px;
+  --sui-primary-toolbar-size: 56px;
+  --sui-secondary-toolbar-size: 48px;
+  --sui-primary-row-height: 56px;
   --sui-secondary-row-height: 40px;
 }
 @media (pointer: coarse) {
@@ -258,9 +258,6 @@
     --sui-control-medium-height: 40px;
     --sui-control-large-height: 60px;
     --sui-checkbox-height: 24px;
-    --sui-primary-toolbar-size: 56px;
-    --sui-secondary-toolbar-size: 48px;
-    --sui-primary-row-height: 56px;
     --sui-secondary-row-height: 48px;
   }
 }
@@ -282,12 +279,12 @@
   --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
   --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
-  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
-  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
+  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%;
+  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%;
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
   --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -314,14 +311,14 @@
   --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
   --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
   --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
-  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
-  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
-  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%;
+  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
-  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%;
+  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
   --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);
@@ -351,12 +348,12 @@
     --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%;
     --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
     --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
-    --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
-    --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
+    --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%;
+    --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%;
     --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%;
-    --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
-    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%;
-    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%;
+    --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%;
+    --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%;
+    --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;
     --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
     --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 80% 45%);
@@ -385,14 +382,14 @@
     --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%;
     --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%;
     --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%;
-    --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
-    --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
-    --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
+    --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%;
+    --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%;
+    --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%;
     --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
     --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-    --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%;
-    --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
-    --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
+    --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%;
+    --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%;
+    --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%;
     --sui-shadow-color: var(--sui-base-hue) 10% 0%;
     --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%);
     --sui-primary-accent-color-light: hsl(var(--sui-base-hue) 100% 45%);

package/dist/index.js

@@ -95,5 +95,4 @@ export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
 
-// eslint-disable-next-line import/export
-export * from './typedefs';
+// eslint-disable-next-line import/export export * from './typedefs';

package/dist/services/group.svelte.js

@@ -16,7 +16,7 @@ const config = {
     childRoles: ['row'],
     childSelectedAttr: 'aria-selected',
     focusChild: true,
-    selectFirst: false,
+    selectFirst: true,
   },
   listbox: {
     orientation: 'vertical',
@@ -88,6 +88,8 @@ class Group {
     this.focusChild = focusChild;
     this.selectFirst = selectFirst;
 
+    this.parent.tabIndex = focusChild ? -1 : 0;
+
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
     (async () => {
       await sleep(100);
@@ -104,19 +106,16 @@ class Group {
 
     allMembers.forEach((element, index) => {
       // Select the first one if no member has the `selected` attribute
-      // eslint-disable-next-line no-nested-ternary
-      const isSelected = multi
-        ? element.getAttribute(this.childSelectedAttr) === 'true'
-        : defaultSelected
-          ? element === defaultSelected
-          : this.selectFirst && index === 0;
+      const isSelected = defaultSelected
+        ? element === defaultSelected
+        : this.selectFirst && index === 0;
 
       const controlTarget = /** @type {HTMLElement | null} */ (
         document.querySelector(`#${element.getAttribute('aria-controls')}`)
       );
 
       element.id ||= `${this.id}-item-${index + 1}`;
-      element.tabIndex ||= isSelected ? 0 : -1;
+      element.tabIndex = isSelected ? 0 : -1;
       element.setAttribute(this.childSelectedAttr, String(isSelected));
 
       if (controlTarget) {

package/dist/styles/variables.scss

@@ -7,12 +7,12 @@
   --sui-foreground-color-5-hsl: var(--sui-base-hue) 5% 65%; // disabled
   --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%; // content/input
   --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%; // primary
-  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
-  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
+  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 95%; // secondary
+  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 92%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 84%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
-  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 84%; // primary
-  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 88%; // secondary
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 60%; // control
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 86%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 5% 90%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 80% 40%);
@@ -41,14 +41,14 @@
   --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 65%; // secondary
   --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 55%; // tertiary
   --sui-foreground-color-5-hsl: var(--sui-base-hue) 10% 35%; // disabled
-  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%; // content/input
-  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%; // primary
-  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
+  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 8%; // content/input
+  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 10%; // primary
+  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 13%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 45%; // control
-  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
-  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 40%; // control
+  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 24%; // primary
+  --sui-border-color-3-hsl: var(--sui-base-hue) 10% 20%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
   // Accents
   --sui-primary-accent-color-text: hsl(var(--sui-base-hue) 100% 60%); // lighter
@@ -234,10 +234,10 @@
     --sui-tab-medium-height: var(--sui-control-medium-height);
     --sui-tab-large-height: var(--sui-control-large-height);
     // Toolbar
-    --sui-primary-toolbar-size: 48px;
-    --sui-secondary-toolbar-size: 40px;
+    --sui-primary-toolbar-size: 56px;
+    --sui-secondary-toolbar-size: 48px;
     // table
-    --sui-primary-row-height: 48px;
+    --sui-primary-row-height: 56px;
     --sui-secondary-row-height: 40px;
 
     // Make controls larger on touch devices, e.g. mobile & tablet
@@ -246,9 +246,6 @@
       --sui-control-medium-height: 40px;
       --sui-control-large-height: 60px;
       --sui-checkbox-height: 24px;
-      --sui-primary-toolbar-size: 56px;
-      --sui-secondary-toolbar-size: 48px;
-      --sui-primary-row-height: 56px;
       --sui-secondary-row-height: 48px;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.22.6",
+  "version": "0.23.1",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -46,33 +46,33 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.1",
-    "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.15.2",
-    "@sveltejs/package": "^2.3.7",
+    "@playwright/test": "^1.50.1",
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "cspell": "^8.17.1",
+    "cspell": "^8.17.3",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsdoc": "^50.6.1",
+    "eslint-plugin-jsdoc": "^50.6.3",
     "eslint-plugin-svelte": "^2.46.1",
-    "postcss": "^8.4.49",
-    "postcss-html": "^1.7.0",
+    "postcss": "^8.5.1",
+    "postcss-html": "^1.8.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
-    "sass": "^1.83.1",
-    "stylelint": "^16.12.0",
+    "prettier-plugin-svelte": "^3.3.3",
+    "sass": "^1.83.4",
+    "stylelint": "^16.14.1",
     "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-scss": "^6.10.0",
-    "svelte": "5.17.3",
-    "svelte-check": "^4.1.3",
+    "stylelint-scss": "^6.11.0",
+    "svelte": "5.19.6",
+    "svelte-check": "^4.1.4",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8"
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4"
   },
   "exports": {
     ".": {