@sveltia/ui 0.1.4 → 0.1.5

package/package/components/composite/combobox.svelte

@@ -81,7 +81,9 @@
       {...$$restProps}
       bind:this={comboboxElement}
     >
-      {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+      <div class="label">
+        {value !== undefined ? label || value : $_('sui.combobox.select_an_option')}
+      </div>
     </div>
   {:else}
     <TextInput
@@ -177,6 +179,13 @@
   opacity: 0.4;
   cursor: default;
 }
+.combobox div[role=combobox] .label {
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 .combobox :global(input) {
   padding: 0 32px 0 8px;
   width: 100%;

package/package/components/composite/select-button-group.svelte

@@ -54,6 +54,7 @@
 }
 .select-button-group :global(button) {
   border-radius: 0;
+  color: var(--secondary-foreground-color);
 }
 .select-button-group :global(button):first-child {
   border-radius: 4px 0 0 4px;

package/package/components/core/checkbox.svelte

@@ -33,10 +33,6 @@
   const id = getRandomId('checkbox');
   /** @type {Button} */
   let button;
-
-  $: {
-    dispatch('change', { checked });
-  }
 </script>
 
 {#if name && value && checked && !indeterminate}
@@ -63,6 +59,7 @@
       event.stopPropagation();
       checked = indeterminate ? true : !checked;
       indeterminate = false;
+      dispatch('change', { checked });
     }}
   >
     <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />

package/package/components/helpers/popup.js

@@ -20,13 +20,21 @@ class Popup {
       }
 
       const contentHeight = this.popupElement.querySelector('.content').scrollHeight;
+      const topMargin = intersectionRect.top - 8;
       const bottomMargin = rootBounds.height - intersectionRect.bottom - 8;
       let { position } = this;
+      let height;
 
+      // Alter the position if the space is limited
       // @todo Handle more overflow cases
-      if (contentHeight > bottomMargin) {
-        if (position.startsWith('bottom-')) {
-          position = position.replace('bottom-', 'top-');
+      if (position.startsWith('bottom-')) {
+        if (contentHeight > bottomMargin) {
+          if (topMargin > bottomMargin) {
+            position = position.replace('bottom-', 'top-');
+            height = topMargin;
+          } else {
+            height = bottomMargin;
+          }
         }
       }
 
@@ -60,7 +68,7 @@ class Popup {
         inset: [top, right, bottom, left].join(' '),
         zIndex: anchorPopup ? Number(anchorPopup.style.zIndex) + 1 : 1000,
         width: `${Math.round(intersectionRect.width)}px`,
-        height: `${Math.round(Math.max(bottomMargin, contentHeight))}px`,
+        height: height ? `${Math.round(height)}px` : 'auto',
       };
 
       if (JSON.stringify(style) !== JSON.stringify(get(this.style))) {

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

@@ -112,7 +112,7 @@
   --background-color-2-hsl: var(--hue) 5% 98%;
   --background-color-3-hsl: var(--hue) 5% 96%;
   --background-color-4-hsl: var(--hue) 5% 94%;
-  --background-color-5-hsl: var(--hue) 5% 90%;
+  --background-color-5-hsl: var(--hue) 5% 80%;
   --shadow-color: var(--hue) 10% 0%;
   --primary-accent-color: hsl(var(--hue) 80% 45%);
   --primary-accent-color-lighter: hsl(var(--hue) 80% 40%);

package/package/components/util/popup.svelte

@@ -28,6 +28,7 @@
 
   let showDialog = false;
   let showContent = false;
+  let contentType;
   let closeDialogTimer = 0;
 
   let style = writable({
@@ -40,6 +41,7 @@
   $: {
     if (anchor && dialog) {
       ({ open, style } = activatePopup(anchor, dialog, position));
+      contentType = anchor.getAttribute('aria-haspopup');
     }
   }
 
@@ -91,7 +93,7 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div
     tabindex="0"
-    class="content"
+    class="content {contentType}"
     style:inset={$style.inset}
     style:z-index={$style.zIndex}
     style:min-width={$style.width}
@@ -128,4 +130,16 @@
   box-shadow: 0 8px 16px var(--popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;
+}
+.content.listbox, .content.menu {
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--secondary-border-color);
+  border-radius: 4px;
+}
+.content.listbox :global(.sui.listbox),
+.content.listbox :global(.sui.menu), .content.menu :global(.sui.listbox),
+.content.menu :global(.sui.menu) {
+  border-width: 0;
+  border-radius: 0;
 }</style>

package/package/styles/variables.scss

@@ -80,7 +80,7 @@
   --background-color-2-hsl: var(--hue) 5% 98%; // primary
   --background-color-3-hsl: var(--hue) 5% 96%; // secondary/ternary
   --background-color-4-hsl: var(--hue) 5% 94%; // disabled
-  --background-color-5-hsl: var(--hue) 5% 90%; // highlight
+  --background-color-5-hsl: var(--hue) 5% 80%; // highlight
   --shadow-color: var(--hue) 10% 0%;
   // Accents
   --primary-accent-color: hsl(var(--hue) 80% 45%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "license": "MIT",
   "type": "module",
   "publishConfig": {
@@ -29,12 +29,12 @@
   "devDependencies": {
     "@babel/core": "^7.21.4",
     "@babel/eslint-parser": "^7.21.3",
-    "@playwright/test": "^1.32.1",
+    "@playwright/test": "^1.32.2",
     "@sveltejs/adapter-auto": "2.0.0",
-    "@sveltejs/kit": "1.15.0",
+    "@sveltejs/kit": "1.15.2",
     "@sveltejs/package": "^2.0.2",
     "cspell": "^6.31.1",
-    "eslint": "^8.37.0",
+    "eslint": "^8.38.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
@@ -44,17 +44,17 @@
     "postcss-html": "^1.5.0",
     "prettier": "^2.8.7",
     "prettier-plugin-svelte": "^2.10.0",
-    "sass": "^1.60.0",
+    "sass": "^1.61.0",
     "stylelint": "^15.4.0",
     "stylelint-config-recommended-scss": "^9.0.1",
     "stylelint-scss": "^4.6.0",
-    "svelte-check": "^3.1.4",
+    "svelte-check": "^3.2.0",
     "svelte-i18n": "^3.6.0",
     "svelte-migrate": "^1.1.3",
     "svelte-preprocess": "^5.0.3",
     "tslib": "^2.5.0",
     "vite": "^4.2.1",
-    "vitest": "^0.29.8"
+    "vitest": "^0.30.0"
   },
   "exports": {
     "./package.json": "./package.json",