@sveltia/ui 0.26.0 → 0.26.2

package/dist/components/bottom-navigation/bottom-navigation.svelte

@@ -36,6 +36,9 @@
   border-top-style: var(--sui-bottom-navigation-border-style, solid);
   border-top-color: var(--sui-bottom-navigation-border-color, var(--sui-secondary-border-color));
 }
+.bottom-navigation:is([inert], [hidden]) {
+  display: none;
+}
 .bottom-navigation :global(.buttons) {
   flex: auto;
   display: flex;

package/dist/components/button/button-group.svelte

@@ -26,6 +26,7 @@
 </div>
 
 <style>.button-group {
+  flex: none;
   display: inline-flex;
   align-items: center;
 }</style>

package/dist/components/button/button.svelte

@@ -104,6 +104,7 @@
 {/if}
 
 <style>button {
+  flex: none;
   display: inline-flex;
   align-items: center;
   gap: 4px;
@@ -257,6 +258,7 @@ button:global(.pill) {
   padding: var(--sui-button-medium-pill-padding, 0 12px);
 }
 button:global(.flex) {
+  flex: auto;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;

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

@@ -63,6 +63,7 @@
 </div>
 
 <style>.select-button-group {
+  flex: none;
   display: inline-flex;
   align-items: center;
   margin: var(--sui-focus-ring-width);

package/dist/components/button/split-button.svelte

@@ -83,6 +83,7 @@
 </div>
 
 <style>.split-button {
+  flex: none;
   display: inline-flex;
   margin: var(--sui-focus-ring-width);
 }

package/dist/components/listbox/listbox.svelte

@@ -103,6 +103,11 @@
   font-size: var(--sui-control-font-size);
   line-height: var(--sui-control-line-height);
 }
+@media (pointer: coarse) {
+  [role=listbox] {
+    gap: 8px 0;
+  }
+}
 [role=listbox] :global([role="separator"]) {
   margin: 4px 0;
   background-color: var(--sui-control-border-color);

package/dist/components/menu/menu-button.svelte

@@ -55,36 +55,34 @@
   };
 </script>
 
-<div role="none" class="wrapper">
-  <Button
-    {...restProps}
-    bind:element={buttonElement}
-    class="sui menu-button {className}"
-    {hidden}
-    {disabled}
-    {label}
-    {variant}
-    {size}
-    {iconic}
-    aria-haspopup="menu"
-  >
-    {#snippet startIcon()}
-      {@render _startIcon?.()}
-    {/snippet}
-    {#snippet children()}
-      {@render _children?.()}
-    {/snippet}
-    {#snippet endIcon()}
-      {#if _endIcon}
-        {@render _endIcon()}
-      {:else if iconic}
-        <Icon name="more_vert" />
-      {:else}
-        <Icon name="arrow_drop_down" class="small-arrow" />
-      {/if}
-    {/snippet}
-  </Button>
-</div>
+<Button
+  {...restProps}
+  bind:element={buttonElement}
+  class="sui menu-button {className}"
+  {hidden}
+  {disabled}
+  {label}
+  {variant}
+  {size}
+  {iconic}
+  aria-haspopup="menu"
+>
+  {#snippet startIcon()}
+    {@render _startIcon?.()}
+  {/snippet}
+  {#snippet children()}
+    {@render _children?.()}
+  {/snippet}
+  {#snippet endIcon()}
+    {#if _endIcon}
+      {@render _endIcon()}
+    {:else if iconic}
+      <Icon name="more_vert" />
+    {:else}
+      <Icon name="arrow_drop_down" class="small-arrow" />
+    {/if}
+  {/snippet}
+</Button>
 
 <Popup
   anchor={buttonElement}

package/dist/components/menu/menu.svelte

@@ -62,6 +62,11 @@
   border-radius: var(--sui-menu-border-radius, 4px);
   padding: var(--sui-menu-padding, 4px);
 }
+@media (pointer: coarse) {
+  .menu {
+    gap: 8px 0;
+  }
+}
 .menu :global([role="separator"]) {
   margin: var(--sui-menu-divider-margin, 4px);
   background-color: var(--sui-menu-divider-color, var(--sui-control-border-color));

package/dist/components/select/combobox.svelte

@@ -33,6 +33,7 @@
     invalid = false,
     editable = true,
     position = 'bottom-left',
+    filterThreshold = 5,
     children,
     chevronIcon,
     onChange,
@@ -197,7 +198,10 @@
   touchOptimized={true}
   bind:open={isPopupOpen}
   onOpen={() => {
-    showFilter = (popupContent?.querySelectorAll('[role="option"]')?.length ?? 0) > 5;
+    showFilter =
+      filterThreshold === -1
+        ? false
+        : (popupContent?.querySelectorAll('[role="option"]')?.length ?? 0) > filterThreshold;
     searchTerms = '';
   }}
 >

package/dist/components/text-field/search-bar.svelte

@@ -130,7 +130,7 @@
   min-width: 0;
 }
 .search-bar :global(.icon) {
-  font-size: var(--sui-font-size-xx-large);
+  font-size: calc(var(--sui-textbox-height) * 0.6);
   opacity: 0.5;
 }
 .search-bar > span {

package/dist/components/toolbar/toolbar.svelte

@@ -91,7 +91,7 @@
 [role=toolbar] :global(h2):first-child {
   padding-inline-start: 12px;
 }
-[role=toolbar] :global(h2) :global(span) {
+[role=toolbar] :global(h2) :global(span:not(.sui.truncated-text)) {
   font-size: var(--sui-font-size-small);
   font-weight: var(--sui-font-weight-normal, normal);
   opacity: 0.8;

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

@@ -258,9 +258,9 @@
 @media (pointer: coarse) {
   :global(:root),
   :global(:host) {
-    --sui-control-small-height: 40px;
-    --sui-control-medium-height: 48px;
-    --sui-control-large-height: 56px;
+    --sui-control-small-height: 32px;
+    --sui-control-medium-height: 40px;
+    --sui-control-large-height: 48px;
     --sui-checkbox-height: 24px;
     --sui-secondary-row-height: 48px;
   }

package/dist/styles/variables.scss

@@ -243,9 +243,9 @@
 
     // Make controls larger on touch devices, e.g. mobile & tablet
     @media (pointer: coarse) {
-      --sui-control-small-height: 40px;
-      --sui-control-medium-height: 48px;
-      --sui-control-large-height: 56px;
+      --sui-control-small-height: 32px;
+      --sui-control-medium-height: 40px;
+      --sui-control-large-height: 48px;
       --sui-checkbox-height: 24px;
       --sui-secondary-row-height: 48px;
     }

package/dist/typedefs.d.ts

@@ -370,6 +370,11 @@ export type ComboboxProps = {
      * Where to show the dropdown menu.
      */
     position?: PopupPosition | undefined;
+    /**
+     * Number of items to start showing the filter. Default: `5`.
+     * Use `-1` to always hide the filter.
+     */
+    filterThreshold?: number | undefined;
     /**
      * Primary slot content.
      */

package/dist/typedefs.js

@@ -127,6 +127,8 @@
  * @property {string} [value] Selected option’s value.
  * @property {boolean} [editable] Whether to make the `combobox` editable.
  * @property {PopupPosition} [position] Where to show the dropdown menu.
+ * @property {number} [filterThreshold] Number of items to start showing the filter. Default: `5`.
+ * Use `-1` to always hide the filter.
  * @property {Snippet} [children] Primary slot content.
  * @property {Snippet} [chevronIcon] Chevron icon slot content.
  * @property {(event: CustomEvent) => void} [onChange] Custom `change` event handler.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "license": "MIT",
   "type": "module",
   "repository": {