diff --git a/README.md b/README.md
index 98d242e..9894c59 100644
--- a/README.md
+++ b/README.md
@@ -113,6 +113,22 @@ those will utilize the first link in the contents.
 Note that [WCAG Label in Name](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name) specifies that the
 name and label must begin with the same words, so the hidden portion should be at the end.
 
+## Upgrade Process
+
+When upgrading from the v2 toolkit component, the following changes are needed:
+
+- Rename all `il-card` to `ilw-card`.
+- Rename all `il-clickable-card` to `ilw-card` and add the `clickable` attribute.
+- Add `slot="image"` to the `img` tag in cards with images.
+- Add `slot="icon"` to the icon in cards with icons.
+- Replace uses of the theme classes with an attribute:
+  - `class="il-theme-gray"` -> `theme="gray"`
+  - `class="il-theme-blue"` -> `theme="blue"`
+  - `class="il-theme-white"` -> `theme="white"`
+  - `class="il-theme-blue-gradient"` -> `theme="blue-gradient"`
+  - `class="il-theme-orange"` -> `theme="orange"`
+  - `class="il-theme-orange-gradient"` -> `theme="orange-gradient"`
+
 ## External References
 
 - https://www.nngroup.com/articles/cards-component/
diff --git a/builder/ilw-card.json b/builder/ilw-card.json
index 924f70c..83c3d81 100644
--- a/builder/ilw-card.json
+++ b/builder/ilw-card.json
@@ -7,5 +7,5 @@
     "description": "A card component that can be used as a container for grouping information.",
     "toolkit-version": "",
     "production-version": "",
-    "development-version": "1.0.0-alpha"
+    "development-version": "1.0.0-alpha1"
 }
diff --git a/builder/versions/ilw-card.1.0.0-alpha.json b/builder/versions/ilw-card.1.0.0-alpha1.json
similarity index 83%
rename from builder/versions/ilw-card.1.0.0-alpha.json
rename to builder/versions/ilw-card.1.0.0-alpha1.json
index cc88598..a65be30 100644
--- a/builder/versions/ilw-card.1.0.0-alpha.json
+++ b/builder/versions/ilw-card.1.0.0-alpha1.json
@@ -5,10 +5,10 @@
     "type": "web component",
     "element-name": "ilw-card",
     "description": "A card component that can be used as a container for grouping information.",
-    "version": "1.0.0-alpha",
+    "version": "1.0.0-alpha1",
     "date": "08/02/2024",
-    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.css",
-    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha/ilw-card.js",
+    "css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha1/ilw-card.css",
+    "js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-alpha1/ilw-card.js",
     "production": false,
     "notes": "",
     "parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;",
@@ -90,122 +90,122 @@
         {
             "name": "--ilw-card--margin-top",
             "depreciated": false,
-            "description": "Margin above cards"
+            "description": "Margin above cards [default: 1rem]"
         },
         {
             "name": "--ilw-card--margin-bottom",
             "depreciated": false,
-            "description": "Margin below cards"
+            "description": "Margin below cards [default: 1rem]"
         },
         {
             "name": "--ilw-card--content-padding-top",
             "depreciated": false,
-            "description": "Top padding around main content in the card"
+            "description": "Top padding around main content in the card [default: 2.5rem]"
         },
         {
             "name": "--ilw-card--content-padding-right",
             "depreciated": false,
-            "description": "Right padding around main content in the card"
+            "description": "Right padding around main content in the card [default: 2rem]"
         },
         {
             "name": "--ilw-card--content-padding-bottom",
             "depreciated": false,
-            "description": "Bottom padding around main content in the card"
+            "description": "Bottom padding around main content in the card [default: 2rem]"
         },
         {
             "name": "--ilw-card--content-padding-left",
             "depreciated": false,
-            "description": "Left padding around main content in the card"
+            "description": "Left padding around main content in the card [default: 2rem]"
         },
         {
             "name": "--ilw-card--font-size",
             "depreciated": false,
-            "description": "Card text font size"
+            "description": "Card text font size [default: 1.2em]"
         },
         {
             "name": "--ilw-card--icon-width",
             "depreciated": false,
-            "description": "Limit for an icon's width"
+            "description": "Limit for an icon's width [default: 120px]"
         },
         {
             "name": "--ilw-card--icon-height",
             "depreciated": false,
-            "description": "Limit for an icon's height"
+            "description": "Limit for an icon's height [default: 80px]"
         },
         {
             "name": "--ilw-card--border-color",
             "depreciated": false,
-            "description": "Color of the border around the card"
+            "description": "Color of the border around the card [default: var(--il-blue)]"
         },
         {
             "name": "--ilw-card--background",
             "depreciated": false,
-            "description": "CSS background for the card"
+            "description": "CSS background for the card [default: var(--ilw-background--color)]"
         },
         {
             "name": "--ilw-card--heading-color",
             "depreciated": false,
-            "description": "Color of the heading in the card"
+            "description": "Color of the heading in the card [default: var(--il-orange)]"
         },
         {
             "name": "--ilw-card--icon-color",
             "depreciated": false,
-            "description": "Color of an icon in the card"
+            "description": "Color of an icon in the card [default: var(--ilw-text--color)]"
         },
         {
             "name": "--ilw-card--text-color",
             "depreciated": false,
-            "description": "Color of text in the card"
+            "description": "Color of text in the card [default: var(--ilw-text--color)]"
         },
         {
             "name": "--ilw-card--link",
             "depreciated": false,
-            "description": "Color for links inside the card "
+            "description": "Color for links inside the card  [default: var(--ilw-link--color)]"
         },
         {
             "name": "--ilw-card--link-focus",
             "depreciated": false,
-            "description": "Focus and hover color for links inside the card"
+            "description": "Focus and hover color for links inside the card [default: var(--ilw-link--focused-color)]"
         },
         {
             "name": "--ilw-card--link-visited",
             "depreciated": false,
-            "description": "Visited link color for inside the card"
+            "description": "Visited link color for inside the card [default: var(--ilw-link--visited-color)]"
         },
         {
             "name": "--ilw-card--clickable--heading-color",
             "depreciated": false,
-            "description": "Color of a clickable card heading"
+            "description": "Color of a clickable card heading [default: var(--ilw-card--heading-color)]"
         },
         {
             "name": "--ilw-card--hover--background",
             "depreciated": false,
-            "description": "Background for the hover state of a clickable card"
+            "description": "Background for the hover state of a clickable card [default: var(--il-blue)]"
         },
         {
             "name": "--ilw-card--hover--heading-color",
             "depreciated": false,
-            "description": "Color of the heading for the hover state of a clickable card"
+            "description": "Color of the heading for the hover state of a clickable card [default: #fff]"
         },
         {
             "name": "--ilw-card--hover--text-color",
             "depreciated": false,
-            "description": "Color of text for the hover state of a clickable card"
+            "description": "Color of text for the hover state of a clickable card [default: #fff]"
         },
         {
             "name": "--ilw-card--hover--clickable-border",
             "depreciated": false,
-            "description": "Color of the bottom wider border for the hover state of a clickable card"
+            "description": "Color of the bottom wider border for the hover state of a clickable card [default: var(--il-industrial-lighter-1)]"
         },
         {
             "name": "--ilw-card--hover--link",
             "depreciated": false,
-            "description": "Link color for links inside the hover state of a clickable card"
+            "description": "Link color for links inside the hover state of a clickable card [default: var(--ilw-card--hover--text-color)]"
         },
         {
             "name": "--ilw-card--hover--link-focus",
             "depreciated": false,
-            "description": "Focus and hover color for links inside the hover state of a clickable card"
+            "description": "Focus and hover color for links inside the hover state of a clickable card [default: var(--il-orange)]"
         }
     ]
 }
diff --git a/package-lock.json b/package-lock.json
index 4883563..26d5cf4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@illinois-toolkit/ilw-card",
-    "version": "0.0.1",
+    "version": "1.0.0-alpha1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@illinois-toolkit/ilw-card",
-            "version": "0.0.1",
+            "version": "1.0.0-alpha1",
             "dependencies": {
                 "lit": "3.1.3"
             },
diff --git a/package.json b/package.json
index bad6bd9..6132234 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
     "description": "Illinois Toolkit: A card component that can be used as a container for grouping information, reminiscent of a physical note or playing card.",
     "repository": "github:web-illinois/ilw-card",
     "private": false,
-    "version": "1.0.0-alpha.0",
+    "version": "1.0.0-alpha1",
     "type": "module",
     "files": [
       "src/**",
diff --git a/parse-vars.js b/parse-vars.js
index d2097dd..451b9c3 100644
--- a/parse-vars.js
+++ b/parse-vars.js
@@ -1,15 +1,15 @@
 import {readFileSync} from "fs";
 
 const contents = readFileSync("src/ilw-card.css", "utf-8");
-const regex = /^\s*(--[\w-]+):[^;]+;\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;
+const regex = /^\s*(--[\w-]+):\s*([^;]+);\s*\/\*\s*(var|vardep):\s*(.+)\*\s*\/$/gm;
 
 let output = [];
 let m;
 while (m = regex.exec(contents)) {
     output.push({
         name: m[1],
-        depreciated: m[2] === "vardep",
-        description: m[3]
+        depreciated: m[3] === "vardep",
+        description: m[4] + ` [default: ${m[2]}]`
     })
 }
 
diff --git a/samples/index.html b/samples/index.html
index ec4f096..d2bd354 100644
--- a/samples/index.html
+++ b/samples/index.html
@@ -144,14 +144,14 @@ <h3>
 <h2>Grid 2</h2>
 
 <ilw-grid>
-    <ilw-card clickable>
-        Clickable card with a <a href="#">link that makes sense</a> out of context.
+    <ilw-card>
+        Clickable card with a <a href="#none">link that makes sense</a> out of context.
     </ilw-card>
     <ilw-card clickable>
-        Clickable card with a <a href="#">link that makes sense</a> out of context.
+        Clickable card with a <a href="#one">link that makes sense</a> out of context.
     </ilw-card>
     <ilw-card clickable>
-        Clickable card with a <a href="#">link that makes sense</a> out of context.
+        Clickable card with a <a href="#two">link that makes sense</a> out of context.
     </ilw-card>
 </ilw-grid>
 
diff --git a/src/ilw-card.css b/src/ilw-card.css
index 7283d5a..30320de 100644
--- a/src/ilw-card.css
+++ b/src/ilw-card.css
@@ -1,6 +1,6 @@
 @layer base {
     :root {
-        --ilw-card--margin-top: 1rem; /*vardep: Margin above cards*/
+        --ilw-card--margin-top: 1rem; /*var: Margin above cards*/
         --ilw-card--margin-bottom: 1rem; /*var: Margin below cards*/
         --ilw-card--aspect-ratio: 16/10;
         --ilw-card--content-padding-top: 2.5rem; /*var: Top padding around main content in the card*/
diff --git a/src/ilw-card.js b/src/ilw-card.js
index 3404e2d..304b5ad 100644
--- a/src/ilw-card.js
+++ b/src/ilw-card.js
@@ -27,8 +27,7 @@ class Card extends LitElement {
         this.clickable = false;
         this._hasGraphic = false;
 
-        // Make the first link in a clickable card be the whole card's link
-        this.addEventListener("click", (ev) => {
+        this._click = (ev) => {
             /**
              * @type {HTMLElement}
              */
@@ -38,7 +37,7 @@ class Card extends LitElement {
                 const link = this.querySelector("a");
                 link.click();
             }
-        });
+        }
     }
 
     /**
@@ -74,7 +73,8 @@ class Card extends LitElement {
                 : null,
         };
         return html`
-            <article class=${classMap(classes)} style=${styleMap(styles)}>
+            <article class=${classMap(classes)} style=${styleMap(styles)}
+                     @click="${this.clickable ? this._click : null}">
                 <div class="card-graphic">
                     <div class="card-image">
                         <slot