feat: set title attribute in CheckBox, MultiSelect, Dropdown, ComboBox if label is truncated (#1317)

* feat(checkbox): set title attribute if label is truncated

* feat(list-box-menu-item): set title attribute if label is truncated

src/Checkbox/Checkbox.svelte

@@ -62,6 +62,11 @@
   $: useGroup = Array.isArray(group);
   $: checked = useGroup ? group.includes(value) : checked;
   $: dispatch("check", checked);
+
+  let refLabel = null;
+
+  $: isTruncated = refLabel?.offsetWidth < refLabel?.scrollWidth;
+  $: title = isTruncated ? refLabel?.innerText : title;
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -109,6 +114,7 @@
     />
     <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
       <span
+        bind:this="{refLabel}"
         class:bx--checkbox-label-text="{true}"
         class:bx--visually-hidden="{hideLabel}"
       >

src/ListBox/ListBoxMenuItem.svelte

@@ -4,6 +4,11 @@
 
   /** Set to `true` to enable the highlighted state */
   export let highlighted = false;
+
+  let ref = null;
+
+  $: isTruncated = ref?.offsetWidth < ref?.scrollWidth;
+  $: title = isTruncated ? ref?.innerText : undefined;
 </script>
 
 <div
@@ -15,7 +20,11 @@
   on:mouseenter
   on:mouseleave
 >
-  <div class:bx--list-box__menu-item__option="{true}">
+  <div
+    bind:this="{ref}"
+    title="{title}"
+    class:bx--list-box__menu-item__option="{true}"
+  >
     <slot />
   </div>
 </div>