@intechstudio/grid-uikit 1.20260622.1304 → 1.20260623.833

package/dist/MeltCheckbox.svelte

@@ -39,7 +39,17 @@
 </script>
 
 <label class:checkbox-box={style === "box"} class:disabled>
-  <button {...$root} use:root class:disabled>
+  <button
+    {...$root}
+    use:root
+    class:disabled
+    on:keydown={(e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        e.currentTarget.click();
+      }
+    }}
+  >
     <div class="checkbox-outer" class:disabled>
       <div
         style:display={target ? "block" : "none"}
@@ -121,6 +131,10 @@
     cursor: pointer;
     font-size: inherit;
   }
+  button:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+  }
 
   button.disabled {
     cursor: default;

package/dist/MeltCombo.svelte

@@ -20,7 +20,7 @@
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, tick } from "svelte";
   import { createPopover } from "@melt-ui/svelte";
   import { fade } from "svelte/transition";
   import { writable, type Writable } from "svelte/store";
@@ -53,6 +53,16 @@
   let selected: Writable<MeltComboSuggestion> = writable();
 
   let inputElement: any;
+  let highlightedIndex = -1;
+
+  $: if (!$open) {
+    highlightedIndex = -1;
+  } else if ($open && filteredSuggestions.length > 0) {
+    const match = filteredSuggestions.findIndex(
+      (s) => String(s.value).trim() === String(inputValue).trim(),
+    );
+    highlightedIndex = match >= 0 ? match : 0;
+  }
 
   const open = writable(false);
 
@@ -80,7 +90,7 @@
   $: handleSelectionChange($selected);
   $: handleInputChange(inputValue);
 
-  $: filteredSuggestions = searchable
+  $: baseList = searchable
     ? suggestions.filter(
         (e) =>
           e.info.toLowerCase().includes(inputValue?.toLowerCase()) ||
@@ -88,6 +98,17 @@
       )
     : suggestions;
 
+  $: filteredSuggestions =
+    inputValue.trim() &&
+    !suggestions.some(
+      (s) => String(s.value).trim() === String(inputValue).trim(),
+    )
+      ? [
+          { info: "Manual entry: " + inputValue, value: inputValue },
+          ...baseList,
+        ]
+      : baseList;
+
   $: infoValue =
     suggestions.find((s) => String(s.value).trim() == String(inputValue).trim())
       ?.info || "";
@@ -147,16 +168,60 @@
     }
   }
 
-  function handleFocus() {
-    filteredSuggestions = suggestions;
-    if (searchable) {
-      inputElement.select();
+  function handleBlur() {
+    open.set(false);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (filteredSuggestions.length === 0) return;
+      if (!$open) {
+        open.set(true);
+      } else {
+        highlightedIndex =
+          highlightedIndex < filteredSuggestions.length - 1
+            ? highlightedIndex + 1
+            : 0;
+        scrollIntoView();
+      }
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (filteredSuggestions.length === 0) return;
+      if (!$open) {
+        open.set(true);
+      } else {
+        highlightedIndex =
+          highlightedIndex > 0
+            ? highlightedIndex - 1
+            : filteredSuggestions.length - 1;
+        scrollIntoView();
+      }
+    } else if (e.key === "Enter") {
+      if (
+        highlightedIndex >= 0 &&
+        highlightedIndex < filteredSuggestions.length
+      ) {
+        e.preventDefault();
+        selected.set(filteredSuggestions[highlightedIndex]);
+        highlightedIndex = -1;
+      } else if (!$open) {
+        e.preventDefault();
+        open.set(true);
+      }
+    } else if (e.key === "Escape") {
+      highlightedIndex = -1;
+      open.set(false);
     }
-    open.set(true);
   }
 
-  function handleBlur() {
-    open.set(false);
+  function scrollIntoView() {
+    tick().then(() => {
+      const el = document.querySelector(
+        `[data-combo-index="${highlightedIndex}"]`,
+      );
+      el?.scrollIntoView({ block: "nearest" });
+    });
   }
 
   let menuWidth;
@@ -166,7 +231,7 @@
   <div class="content">
     {#if title?.length > 0}
       <label>
-        {title}
+        <span class="label-text">{title}</span>
         <div bind:clientWidth={menuWidth}>
           <input
             bind:this={inputElement}
@@ -175,11 +240,11 @@
             use:trigger
             bind:value={inputValue}
             on:change={handleChange}
-            on:focus={handleFocus}
             on:blur={handleBlur}
             on:m-keydown={(e) => {
               e.preventDefault();
             }}
+            on:keydown={handleKeydown}
             on:click={() => {
               open.set(true);
             }}
@@ -199,11 +264,11 @@
           use:trigger
           bind:value={inputValue}
           on:change={handleChange}
-          on:focus={handleFocus}
           on:blur={handleBlur}
           on:m-keydown={(e) => {
             e.preventDefault();
           }}
+          on:keydown={handleKeydown}
           on:click={() => {
             open.set(true);
           }}
@@ -216,7 +281,7 @@
     {/if}
   </div>
 
-  {#if $open && !disabled && suggestions.length > 0}
+  {#if $open && !disabled && filteredSuggestions.length > 0}
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       {...$content}
@@ -227,12 +292,17 @@
       style="min-width: {menuWidth}px;"
     >
       <div>
-        {#each filteredSuggestions as suggestion}
+        {#each filteredSuggestions as suggestion, i}
           <option
             {...$close}
             use:close
             class="suggestion"
-            on:click={() => selected.set(suggestion)}>{suggestion.info}</option
+            data-combo-index={i}
+            on:click={() => selected.set(suggestion)}
+            on:mouseenter={() => (highlightedIndex = i)}
+            style={highlightedIndex === i
+              ? "background-color: var(--popover-selection); color: var(--foreground);"
+              : ""}>{suggestion.info}</option
           >
         {/each}
       </div>
@@ -264,18 +334,19 @@
     color: var(--foreground);
     font-size: 0.875em;
     line-height: 1.25em;
+    align-items: center;
+  }
+  .label-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    align-items: center;
+    display: block;
   }
   input {
     cursor: auto;
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+    outline: none;
     width: 100%;
-    display: flex;
-    flex-direction: row;
+    box-sizing: border-box;
     border: 1px solid var(--background-soft);
     padding: 0.5em;
     color: var(--foreground);
@@ -283,6 +354,10 @@
     margin: 0.25em 0em 0em;
     font-size: inherit;
   }
+  input:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+  }
   input.error {
     border-color: var(--error);
   }
@@ -325,6 +400,7 @@
     color: var(--foreground-soft);
     font-size: 0.875em;
     line-height: 1.25em;
+    margin-top: 0.25em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

package/dist/MeltRadio.svelte

@@ -84,8 +84,8 @@
               class:disabled
             />
           </div>
+          <span class:disabled>{title}</span>
         </button>
-        <span class:disabled>{title}</span>
       {/if}
       {#if style === "button"}
         <button
@@ -176,6 +176,12 @@
     padding: 0; /* 3 */
     background-color: transparent; /* 2 */
     cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+  }
+  button:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
   }
   button.style-button {
     position: relative;
@@ -183,6 +189,7 @@
     width: 100%;
     border-radius: 0.25em;
     border: 1px solid var(--background-soft);
+    justify-content: center;
   }
   button.style-button:hover {
     background-color: var(--background-muted);

package/dist/MeltSelect.svelte

@@ -120,6 +120,10 @@
     background-color: var(--background-muted);
     cursor: pointer;
   }
+  button.select:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+  }
   button.disabled {
     color: var(--foreground-disabled);
     cursor: default;

package/dist/MeltSlider.svelte

@@ -103,6 +103,10 @@
     border-radius: 9999px;
     background-color: var(--foreground-muted);
   }
+  span.thumb:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+  }
 
   span.container.disabled {
     pointer-events: none;

package/dist/MoltenInput.svelte

@@ -101,8 +101,8 @@
     font-size: inherit;
   }
   input:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
   }
   input:disabled {
     cursor: default;

package/dist/MoltenPushButton.svelte

@@ -143,8 +143,8 @@
   }
 
   button:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
   }
 
   button.grouped {

package/dist/MoltenPushButtonDropdown.svelte

@@ -185,8 +185,8 @@
   }
 
   .dropdown-button:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
   }
 
   .dropdown-button.grouped {

package/dist/MoltenTooltip.svelte

@@ -20,11 +20,13 @@
 
   let showbuttons = $state(false);
   let showTooltip = $state(false);
+  let tooltipKey = $state(0);
 
   let tooltipElement: HTMLDivElement | undefined = $state();
   let previousFocusedElement: HTMLElement | null = null;
   let closeTimeout: any;
   let openTimeout: any;
+  let isRestoringFocus = false;
 
   function handleClick(e: any) {
     //handleReferenceElementClick(e);
@@ -49,12 +51,11 @@
       }
     }
     if (triggerEvents.includes("show-buttons")) {
-      if (!showbuttons) {
-        clearTimeout(openTimeout);
-        showTooltip = true;
-        if (buttons.length > 0) {
-          showbuttons = true;
-        }
+      clearTimeout(openTimeout);
+      tooltipKey++;
+      showTooltip = true;
+      if (buttons.length > 0) {
+        showbuttons = true;
       }
     }
     if (triggerEvents.includes("hover") && !showbuttons) {
@@ -85,14 +86,14 @@
       clearTimeout(openTimeout);
       closeTimeout = setTimeout(
         () => {
-          showTooltip = false;
+          close();
         },
         instant ? 0 : 100,
       );
     }
     if (triggerEvents.includes("click")) {
       closeTimeout = setTimeout(() => {
-        showTooltip = false;
+        close();
       }, 100);
     }
     //e.stopPropagation();
@@ -100,16 +101,21 @@
 
   function handleReferenceElementFocus(e: any) {
     if (triggerEvents.includes("focus")) {
+      if (isRestoringFocus) return;
       clearTimeout(closeTimeout);
       showTooltip = true;
     }
     //e.stopPropagation();
   }
 
-  function handleReferenceElementBlur(e: any) {
+  function handleReferenceElementBlur(e: FocusEvent) {
     if (triggerEvents.includes("focus")) {
+      const relatedTarget = e.relatedTarget as Node | null;
+      if (relatedTarget && tooltipElement?.contains(relatedTarget)) {
+        return;
+      }
       closeTimeout = setTimeout(() => {
-        showTooltip = false;
+        close();
       }, 100);
     }
     //e.stopPropagation();
@@ -147,6 +153,17 @@
     if (tooltipElement) {
       previousFocusedElement = document.activeElement as HTMLElement | null;
       tooltipElement.focus();
+      const handleFocusOut = (e: FocusEvent) => {
+        const relatedTarget = e.relatedTarget as Node | null;
+        if (relatedTarget && tooltipElement?.contains(relatedTarget)) {
+          return;
+        }
+        close();
+      };
+      tooltipElement.addEventListener("focusout", handleFocusOut);
+      return () => {
+        tooltipElement?.removeEventListener("focusout", handleFocusOut);
+      };
     }
   });
 
@@ -204,90 +221,96 @@
     );
   }
 
-  function close() {
+  function close(restoreFocus = true) {
     clearTimeout(openTimeout);
     clearTimeout(closeTimeout);
     showTooltip = false;
     showbuttons = false;
-    if (previousFocusedElement) {
+    if (restoreFocus && previousFocusedElement) {
+      isRestoringFocus = true;
       previousFocusedElement.focus();
       previousFocusedElement = null;
+      requestAnimationFrame(() => {
+        isRestoringFocus = false;
+      });
     }
   }
 </script>
 
-<Popover
-  bind:isOpen={showTooltip}
-  triggerEvents={["manual"]}
-  {referenceElement}
-  bind:placement
-  spaceAway={10}
->
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div
-    on:mouseenter={handleMouseEnter}
-    on:mouseleave={handleMouseLeave}
-    on:click={handleClick}
-    bind:this={tooltipElement}
-    tabindex="-1"
-    class="{className} tooltip-container"
-    transition:fade|global={{
-      duration: instant ? 0 : duration, //Make it instant when explicitly clicked
-    }}
+{#key tooltipKey}
+  <Popover
+    isOpen={showTooltip}
+    triggerEvents={["manual"]}
+    {referenceElement}
+    bind:placement
+    spaceAway={10}
   >
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="tooltip-container-content"
-      class:tooltip-gap-2={buttons.length > 0}
+      on:mouseenter={handleMouseEnter}
+      on:mouseleave={handleMouseLeave}
+      on:click={handleClick}
+      bind:this={tooltipElement}
+      tabindex="-1"
+      class="{className} tooltip-container"
+      transition:fade|global={{
+        duration: instant ? 0 : duration, //Make it instant when explicitly clicked
+      }}
     >
-      {#if typeof component === "undefined"}
-        <div
-          class="tooltip-container-text"
-          class:tooltip-whitespace-nowrap={nowrap}
-        >
-          {text}
-        </div>
-      {:else}
-        <svelte:component
-          this={component.object}
-          {...component.props}
-          class="tooltip-container-component"
-          on:event={interceptEvent}
-        />
-      {/if}
-
-      {#if showbuttons}
-        <div
-          transition:slide|global={{ duration: instant ? 0 : 100 }}
-          class="tooltip-container-buttons"
-        >
-          {#each buttons as button}
-            <MoltenPushButton
-              text={button.label}
-              snap={"full"}
-              click={() => {
-                if (typeof button.handler !== "undefined") {
-                  button.handler();
-                }
-                close();
-              }}
-            />
-          {/each}
-        </div>
-      {/if}
+      <div
+        class="tooltip-container-content"
+        class:tooltip-gap-2={buttons.length > 0}
+      >
+        {#if typeof component === "undefined"}
+          <div
+            class="tooltip-container-text"
+            class:tooltip-whitespace-nowrap={nowrap}
+          >
+            {text}
+          </div>
+        {:else}
+          <svelte:component
+            this={component.object}
+            {...component.props}
+            class="tooltip-container-component"
+            on:event={interceptEvent}
+          />
+        {/if}
+
+        {#if showbuttons}
+          <div
+            transition:slide|global={{ duration: instant ? 0 : 100 }}
+            class="tooltip-container-buttons"
+          >
+            {#each buttons as button}
+              <MoltenPushButton
+                text={button.label}
+                snap={"full"}
+                click={() => {
+                  if (typeof button.handler !== "undefined") {
+                    button.handler();
+                  }
+                  close();
+                }}
+              />
+            {/each}
+          </div>
+        {/if}
+      </div>
     </div>
-  </div>
-  <div
-    transition:fade|global={{
-      duration: instant ? 0 : duration,
-    }}
-    class="tooltip-absolute"
-    id="arrow"
-    data-popper-arrow
-  >
-    <div class="tooltip-absolute" id="arrow_face" />
-  </div>
-</Popover>
+    <div
+      transition:fade|global={{
+        duration: instant ? 0 : duration,
+      }}
+      class="tooltip-absolute"
+      id="arrow"
+      data-popper-arrow
+    >
+      <div class="tooltip-absolute" id="arrow_face" />
+    </div>
+  </Popover>
+{/key}
 
 <style global>
   div.tooltip-container {
@@ -299,6 +322,11 @@
     border-radius: 0.375rem;
     z-index: 99;
     padding: 0.25rem;
+    outline: 1px dashed transparent;
+  }
+  div.tooltip-container:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
   }
 
   div.tooltip-container-content {

package/dist/Toggle.svelte

@@ -26,6 +26,13 @@
     on:change={handleChange}
     class="{$$props.class} toggle"
     {disabled}
+    on:keydown={(e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        value = !value;
+        handleChange();
+      }
+    }}
   />
 </div>
 
@@ -49,7 +56,8 @@
   }
 
   input[type="checkbox"]:focus {
-    outline: 0;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
   }
 
   .toggle {

package/dist/theme.css

@@ -26,6 +26,10 @@
   --accent-muted: color-mix(in srgb, var(--accent), var(--shadow) 30%);
   --accent-soft: color-mix(in srgb, var(--accent), var(--shadow) 50%);
 
+  --focus: #0000ff;
+  --focus-outline: 1px solid var(--focus);
+  --focus-offset: 1px;
+
   --error: #dc2626;
 
   --popover-background: color-mix(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intechstudio/grid-uikit",
-  "version": "1.20260622.1304",
+  "version": "1.20260623.833",
   "repository": {
     "type": "git",
     "url": "https://github.com/intechstudio/grid-uikit.git"

package/src/lib/theme.css

@@ -26,6 +26,10 @@
   --accent-muted: color-mix(in srgb, var(--accent), var(--shadow) 30%);
   --accent-soft: color-mix(in srgb, var(--accent), var(--shadow) 50%);
 
+  --focus: #0000ff;
+  --focus-outline: 1px solid var(--focus);
+  --focus-offset: 1px;
+
   --error: #dc2626;
 
   --popover-background: color-mix(