@likable-hair/svelte 3.1.0 → 3.1.2

package/dist/components/composed/forms/YearPickerTextField.svelte

@@ -42,7 +42,7 @@ onMount(() => {
     inputElement,
     maskFactoryArgs
   );
-  if (selectedYear !== void 0) {
+  if (selectedYear !== void 0 && selectedYear !== null) {
     mask.value = selectedYear.toString();
   }
 });

package/dist/components/simple/forms/Autocomplete.svelte

@@ -163,7 +163,7 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
       class="selection-container"
     >
       {#each (values || []).slice(0, maxVisibleChips) as selection}
-        <slot name="selection" {selection}>
+        <slot name="selection" {selection} {unselect} >
           <div tabindex="-1">
             <Chip
               close={true}
@@ -345,7 +345,17 @@ import MenuOrDrawer from "../../composed/common/MenuOrDrawer.svelte";
   .selection-container:focus-within {
     border: var(
       --autocomplete-focus-border,
-      var(--autocomplete-default-focus-border)
+      var(
+        --autocomplete-default-focus-border,
+        var(
+          --autocomplete-border,
+          var(--autocomplete-default-border)
+        )
+      )
+    );
+    box-shadow: var(
+      --autocomplete-focus-box-shadow,
+      var(--autocomplete-default-focus-box-shadow)
     );
   }
 

package/dist/components/simple/forms/Autocomplete.svelte.d.ts

@@ -56,6 +56,7 @@ declare const __propDef: {
         };
         selection: {
             selection: Item;
+            unselect: (item: Item) => void;
         };
         'chip-label': {
             selection: Item;

package/dist/components/simple/navigation/Chip.svelte

@@ -5,22 +5,24 @@ import Button from "../buttons/Button.svelte";
 import { createEventDispatcher } from "svelte";
 export let close = false, closeIcon = "mdi-close-circle", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, buttonTabIndex = null, truncateText = false;
 const dispatch = createEventDispatcher();
-function handleChipClick() {
-  dispatch("click");
+function handleChipClick(e) {
+  dispatch("click", { native: e });
 }
 function handleCloseClick(e) {
   e.detail.nativeEvent.stopPropagation();
-  dispatch("close");
+  dispatch("close", {
+    native: e.detail.nativeEvent
+  });
 }
 </script>
 
-<div
+<button
   class="chip"
   class:label
   class:outlined
   class:disabled
+  disabled={disabled}
   on:click={handleChipClick}
-  on:keypress={handleChipClick}
 >
   {#if filter}
     <div class="icon-before">
@@ -42,12 +44,14 @@ function handleCloseClick(e) {
         --button-background-color="transparent"
         --button-padding="0px"
         --button-color="var(--chip-color, var(--chip-default-color))"
+        --button-default-icon-active-color="var(--chip-color, var(--chip-default-color))"
+        --button-default-focus-active-color="var(--chip-color, var(--chip-default-color))"
         on:click
         ={handleCloseClick}
       />
     </div>
   {/if}
-</div>
+</button>
 
 <style>
   .chip {
@@ -70,6 +74,13 @@ function handleCloseClick(e) {
       --chip-cursor,
       var(--chip-default-cursor)
     );
+
+    outline: inherit;
+    background-image: none;
+    text-transform: none;
+    line-height: inherit;
+    border: none;
+    font: inherit;
   }
 
   .truncate {

package/dist/components/simple/navigation/Chip.svelte.d.ts

@@ -14,8 +14,12 @@ declare const __propDef: {
         truncateText?: boolean | undefined;
     };
     events: {
-        click: CustomEvent<any>;
-        close: CustomEvent<any>;
+        click: CustomEvent<{
+            native: MouseEvent;
+        }>;
+        close: CustomEvent<{
+            native: MouseEvent;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",