docs: publicize size/version

packages/action-menu/README.md

@@ -4,6 +4,9 @@ An `<sp-action-menu />` is simply an action button with a Popover. Use an `<sp-m
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/action-menu?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/action-menu)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/action-menu?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/action-menu)
+
 ```
 npm install @spectrum-web-components/action-menu
 

packages/actionbar/README.md

@@ -4,6 +4,9 @@ A `<sp-actionbar>` delivers a floating action bar that is a convenient way to de
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/actionbar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/actionbar)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/actionbar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/actionbar)
+
 ```
 npm install @spectrum-web-components/actionbar
 

packages/avatar/README.md

@@ -4,6 +4,9 @@ An **sp-avatar** is a great way to feature a visual representation of a user.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/avatar?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/avatar)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/avatar?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/avatar)
+
 ```
 npm install @spectrum-web-components/avatar
 

packages/banner/README.md

@@ -4,6 +4,9 @@ An **sp-banner** is an additional label an existing component may have. Banners
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/banner?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/banner)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/banner?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/banner)
+
 ```
 npm install @spectrum-web-components/banner
 

packages/bundle/README.md

@@ -4,6 +4,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/bundle?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/bundle)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/bundle?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/bundle)
+
 ```
 npm install @spectrum-web-components/bundle
 

packages/button/README.md

@@ -7,6 +7,9 @@ loudness for various attention-getting needs.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
+
 ```
 npm install @spectrum-web-components/button
 

packages/button/action-button.md

@@ -4,6 +4,9 @@ An `<sp-action-button>` represents an action a user can take.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/button?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/button)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/button?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/button)
+
 ```
 npm install @spectrum-web-components/button
 

packages/card/README.md

@@ -8,6 +8,9 @@ Spectrum has several card variations for different uses.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/card?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/card)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/card?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/card)
+
 ```
 npm install @spectrum-web-components/card
 

packages/checkbox/README.md

@@ -8,6 +8,9 @@ instead of selecting.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/checkbox?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/checkbox)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/checkbox?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/checkbox)
+
 ```
 npm install @spectrum-web-components/checkbox
 

packages/circleloader/README.md

@@ -4,6 +4,9 @@ An `<sp-circleloader>` shows the progression of a system operation such as downl
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/circleloader?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/circleloader)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/circleloader?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/circleloader)
+
 ```
 npm install @spectrum-web-components/circleloader
 

packages/coachmark/README.md

@@ -4,6 +4,9 @@ An `<sp-coachmark>` element can be used to bring added attention to specific par
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/coachmark?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/coachmark)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/coachmark?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/coachmark)
+
 ```
 npm install @spectrum-web-components/coachmark
 

packages/dropdown/README.md

@@ -4,6 +4,9 @@ An `<sp-dropdown />` is an alternative to HTML's `select` element. Use an `<sp-m
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/dropdown?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/dropdown)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dropdown?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dropdown)
+
 ```
 npm install @spectrum-web-components/dropdown
 

packages/dropzone/README.md

@@ -6,6 +6,9 @@ DropZones should be used with an IllustratedMessage component as a child if the
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/dropzone?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/dropzone)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/dropzone?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/dropzone)
+
 ```
 npm install @spectrum-web-components/dropzone
 

packages/icon/README.md

@@ -4,6 +4,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/icon?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/icon)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/icon?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/icon)
+
 ```
 npm install @spectrum-web-components/icon
 

packages/icons-workflow/README.md

@@ -4,6 +4,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/icons-workflow?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/icons-workflow)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/icons-workflow?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/icons-workflow)
+
 ```
 npm install @spectrum-web-components/icons-workflow
 

packages/icons/README.md

@@ -4,6 +4,9 @@ The `<sp-icons-medium>` and `<sp-icons-large>` elements that are included in thi
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/icons?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/icons)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/icons?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/icons)
+
 ```
 npm install @spectrum-web-components/icons
 

packages/iconset/README.md

@@ -4,6 +4,9 @@ Extend either the `Iconset` or `IconsetSVG` exports of this package to supply yo
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/iconset?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/iconset)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/iconset?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/iconset)
+
 ```
 npm install @spectrum-web-components/iconset
 

packages/illustrated-message/README.md

@@ -4,6 +4,9 @@ An **sp-illustrated-message** displays an illustration icon and a message, usual
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/illustrated-message?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/illustrated-message)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/illustrated-message?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/illustrated-message)
+
 ```
 npm install @spectrum-web-components/illustrated-message
 

packages/link/README.md

@@ -4,6 +4,9 @@ An **sp-link** allow users to navigate to a different location. They can be pres
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/link?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/link)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/link?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/link)
+
 ```
 npm install @spectrum-web-components/link
 

packages/menu-group/README.md

@@ -4,6 +4,9 @@ An `<sp-menu />` is used for creating a menu list. The various elements inside a
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/menu-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/menu-group)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/menu-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/menu-group)
+
 ```
 npm install @spectrum-web-components/menu-group
 

packages/menu-item/README.md

@@ -4,6 +4,9 @@ An `<sp-menu />` is used for creating a menu list. The various elements inside a
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/menu-item?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/menu-item)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/menu-item?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/menu-item)
+
 ```
 npm install @spectrum-web-components/menu-item
 

packages/menu/README.md

@@ -4,6 +4,9 @@ An `<sp-menu />` is used for creating a menu list. The various elements inside a
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/menu?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/menu)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/menu?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/menu)
+
 ```
 npm install @spectrum-web-components/menu
 

packages/overlay/README.md

@@ -6,6 +6,9 @@ Note: Cascading styles not applied via `<sp-theme>` are not currently projected
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/overlay?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/overlay)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/overlay?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/overlay)
+
 ```
 npm install @spectrum-web-components/overlay
 

packages/popover/README.md

@@ -4,6 +4,9 @@ An **sp-popover** is used to display transient content (menus, options, addition
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/popover?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/popover)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/popover?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/popover)
+
 ```
 npm install @spectrum-web-components/popover
 

packages/radio-group/README.md

@@ -6,6 +6,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/radio-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/radio-group)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/radio-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/radio-group)
+
 ```
 npm install @spectrum-web-components/radio-group
 

packages/radio/README.md

@@ -6,6 +6,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/radio?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/radio)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/radio?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/radio)
+
 ```
 npm install @spectrum-web-components/radio
 

packages/search/README.md

@@ -4,6 +4,9 @@ The `<sp-search />` element delivers a single input field with a "reset" button
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/search?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/search)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/search?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/search)
+
 ```
 npm install @spectrum-web-components/search
 

packages/shared/README.md

@@ -4,6 +4,9 @@ Shared mixins, tools, etc. that support developing Spectrum Web Components.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/shared?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/shared)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/shared?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/shared)
+
 ```
 npm install @spectrum-web-components/shared
 

packages/sidenav/README.md

@@ -9,6 +9,9 @@ of larger elements and mechanisms within the app frame.
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/sidenav?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/sidenav)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/sidenav?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/sidenav)
+
 ```
 npm install @spectrum-web-components/sidenav
 

packages/slider/README.md

@@ -4,6 +4,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/slider?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/slider)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/slider?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/slider)
+
 ```
 npm install @spectrum-web-components/slider
 

packages/status-light/README.md

@@ -4,6 +4,9 @@ An **sp-status-light** is a great way to convey semantic meaning, such as status
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/status-light?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/status-light)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/status-light?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/status-light)
+
 ```
 npm install @spectrum-web-components/status-light
 

packages/styles/README.md

@@ -6,6 +6,9 @@ The easiest way to consume these values is via the `<sp-theme>` element, however
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/styles?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/styles)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/styles?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/styles)
+
 ```
 npm install @spectrum-web-components/styles
 

packages/switch/README.md

@@ -4,6 +4,9 @@ An **sp-switch** is used to turn an option on or off. Switches allow users to se
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/switch?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/switch)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/switch?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/switch)
+
 ```
 npm install @spectrum-web-components/switch
 

packages/tab-list/README.md

@@ -4,6 +4,9 @@ The `<sp-tab-list>` component contains set of tab-item elements. This is typical
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tab-list?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tab-list)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tab-list?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tab-list)
+
 ```
 npm install @spectrum-web-components/tab-list
 

packages/tab/README.md

@@ -4,6 +4,9 @@ The `<sp-tab>` component is intended to be the child of an `<sp-tab-list>` eleme
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tab?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tab)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tab?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tab)
+
 ```
 npm install @spectrum-web-components/tab
 

packages/textfield/README.md

@@ -4,6 +4,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/textfield?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/textfield)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/textfield?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/textfield)
+
 ```
 npm install @spectrum-web-components/textfield
 

packages/textfield/textarea.md

@@ -4,6 +4,9 @@
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/textfield?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/textfield)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/textfield?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/textfield)
+
 ```
 npm install @spectrum-web-components/textfield
 

packages/theme/README.md

@@ -7,6 +7,9 @@ color themes (dark, light and lightest) and one one of the scales (medium).
 
 ### Installation
 
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/theme?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/theme)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/theme?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/theme)
+
 ```
 npm install @spectrum-web-components/theme