Improve Button type definitions

package.json

@@ -11,7 +11,7 @@
     "lodash.merge": "^4.6.2",
     "postcss": "^8.4.14",
     "postcss-js": "^4.0.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.50.1",
     "svelte-check": "^2.0.0",
     "svelte-preprocess": "^4.0.0",
     "ts-jest": "^27.0.3",

web-components/button/button.svelte

@@ -4,11 +4,31 @@
   import { createEventDispatcher } from 'svelte';
   import type * as Props from './props'
 
+  type Href = $$Generic<string | undefined>;
+  type Disabled = $$Generic<Href extends string ? boolean : undefined>;
+    type ExcludedProps = 'size' | 'href' | 'hreflang';
+
+  interface CommonProps {
+    kind?: Props.ButtonKind;
+    size?: Props.ButtonSize;
+    isLoading?: boolean;
+  }
+
+  type ButtonProps = CommonProps & Omit<Partial<svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['button']>>, ExcludedProps> & {
+    isDisabled?: Disabled;
+  }
+
+  type LinkProps = CommonProps & Omit<Partial<svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['a']>>, ExcludedProps> & {
+    href: Href;
+  }
+
+  type $$Props = (LinkProps | ButtonProps)
+
   export let kind: Props.ButtonKind = "primary"
   export let size: Props.ButtonSize = "medium"
   export let isLoading: boolean = false
-  export let isDisabled: boolean = false
-  export let href: string = "";
+  export let isDisabled: Disabled = undefined as Disabled;
+  export let href: Href = undefined as Href;
 
   const tag = href ? "a" : "button";
 
@@ -22,16 +42,36 @@
   }
 </script>
 
+<svelte:element
+  this={tag}
+  href={href || undefined}
+  class="leoButton"
+  class:isPrimary={kind === 'primary'}
+  class:isSecondary={kind === 'secondary'}
+  class:isTertiary={kind === 'tertiary'}
+  class:isCTA={kind === 'CTA'}
+  class:isLarge={size === 'large'}
+  class:isMedium={size === 'medium'}
+  class:isSmall={size === 'small'}
+  class:isLoading
+  disabled={isDisabled || undefined}
+  on:click={onClick}
+  {...$$restProps}
+>
+  <slot>Leo Button</slot>
+</svelte:element>
+
 <style lang="scss">
   // Main styles and states
   .leoButton {
     // Gradients cannot have a transition, so we need to reset `transition`
     // to only apply to `box-shadow` and `border-color` in .isCTA
-    --default-transition: box-shadow .12s ease-in-out, color .12s ease-in-out, border-color .12s ease-in-out;
+    --default-transition: box-shadow 0.12s ease-in-out, color 0.12s ease-in-out,
+      border-color 0.12s ease-in-out;
     --box-shadow-hover: var(--effect-elevation-02);
     display: block;
     cursor: pointer;
-    transition: background .12s ease-in-out, var(--default-transition);
+    transition: background 0.12s ease-in-out, var(--default-transition);
     box-shadow: none;
     border: solid var(--border-width, 0px) var(--border-color, transparent);
     border-radius: var(--radius-full);
@@ -66,14 +106,14 @@
 
   // State Definitions
   .leoButton.isLoading {
-    opacity: .75;
+    opacity: 0.75;
     background: var(--bg-loading, var(--bg));
     color: var(--color-loading, var(--color));
   }
   :host:disabled .leoButton,
   .leoButton:disabled {
     background: var(--bg-disabled, var(--bg));
-    opacity: .5;
+    opacity: 0.5;
   }
 
   // Size Variations
@@ -156,21 +196,3 @@
     --color: white;
   }
 </style>
-
-<svelte:element
-  this={tag}
-  href={href || undefined}
-  class="leoButton"
-  class:isPrimary="{kind==="primary"}"
-  class:isSecondary="{kind==="secondary"}"
-  class:isTertiary="{kind==="tertiary"}"
-  class:isCTA="{kind==="CTA"}"
-  class:isLarge="{size === 'large'}"
-  class:isMedium="{size === 'medium'}"
-  class:isSmall="{size === 'small'}"
-  class:isLoading="{isLoading}"
-  disabled={isDisabled || undefined}
-  on:click={onClick}
->
-  <slot>Leo Button</slot>
-</svelte:element>