From 9467d4d81ddb1a230549498e3c3685b2efbed4b5 Mon Sep 17 00:00:00 2001
From: FragginWagon <greg.r.jacobs@gmail.com>
Date: Wed, 28 Jan 2026 22:22:30 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Update=20progress=20documentation?=
 =?UTF-8?q?=20and=20mark=20Step=203=20as=20completed=20in=20project=20trac?=
 =?UTF-8?q?ker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/shared/BaseButton.vue      | 282 ++++++++++++++++++
 docs/projects/Pokedex.Online/PROGRESS.md      |  10 +-
 2 files changed, 287 insertions(+), 5 deletions(-)
 create mode 100644 code/websites/pokedex.online/src/components/shared/BaseButton.vue

diff --git a/code/websites/pokedex.online/src/components/shared/BaseButton.vue b/code/websites/pokedex.online/src/components/shared/BaseButton.vue
new file mode 100644
index 0000000..b7be3fb
--- /dev/null
+++ b/code/websites/pokedex.online/src/components/shared/BaseButton.vue
@@ -0,0 +1,282 @@
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="buttonClasses"
+    @click="handleClick"
+  >
+    <span v-if="loading" class="spinner" aria-hidden="true"></span>
+    <span v-if="icon && iconPosition === 'left' && !loading" class="icon icon-left">
+      {{ icon }}
+    </span>
+    <span v-if="$slots.default" :class="{ 'sr-only': loading }">
+      <slot></slot>
+    </span>
+    <span v-if="icon && iconPosition === 'right' && !loading" class="icon icon-right">
+      {{ icon }}
+    </span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * Button variant style
+   * @type {'primary' | 'secondary' | 'danger' | 'ghost' | 'icon-only'}
+   */
+  variant: {
+    type: String,
+    default: 'primary',
+    validator: (value) => ['primary', 'secondary', 'danger', 'ghost', 'icon-only'].includes(value)
+  },
+  
+  /**
+   * Button size
+   * @type {'small' | 'medium' | 'large'}
+   */
+  size: {
+    type: String,
+    default: 'medium',
+    validator: (value) => ['small', 'medium', 'large'].includes(value)
+  },
+  
+  /**
+   * Whether button is in loading state
+   */
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  
+  /**
+   * Whether button is disabled
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  
+  /**
+   * Icon character or emoji to display
+   */
+  icon: {
+    type: String,
+    default: null
+  },
+  
+  /**
+   * Icon position relative to text
+   * @type {'left' | 'right'}
+   */
+  iconPosition: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  
+  /**
+   * Whether button should take full width of container
+   */
+  fullWidth: {
+    type: Boolean,
+    default: false
+  },
+  
+  /**
+   * Button type attribute
+   * @type {'button' | 'submit' | 'reset'}
+   */
+  type: {
+    type: String,
+    default: 'button',
+    validator: (value) => ['button', 'submit', 'reset'].includes(value)
+  }
+});
+
+const emit = defineEmits(['click']);
+
+const buttonClasses = computed(() => [
+  'base-button',
+  `base-button--${props.variant}`,
+  `base-button--${props.size}`,
+  {
+    'base-button--loading': props.loading,
+    'base-button--disabled': props.disabled,
+    'base-button--full-width': props.fullWidth,
+    'base-button--icon-only': props.variant === 'icon-only' || (!props.$slots.default && props.icon)
+  }
+]);
+
+const handleClick = (event) => {
+  if (!props.disabled && !props.loading) {
+    emit('click', event);
+  }
+};
+</script>
+
+<style scoped>
+.base-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.5;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  white-space: nowrap;
+}
+
+.base-button:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+/* Sizes */
+.base-button--small {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.base-button--medium {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+.base-button--large {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+/* Variants */
+.base-button--primary {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.base-button--primary:hover:not(:disabled) {
+  background-color: #2563eb;
+}
+
+.base-button--primary:active:not(:disabled) {
+  background-color: #1d4ed8;
+}
+
+.base-button--secondary {
+  background-color: #e5e7eb;
+  color: #1f2937;
+}
+
+.base-button--secondary:hover:not(:disabled) {
+  background-color: #d1d5db;
+}
+
+.base-button--secondary:active:not(:disabled) {
+  background-color: #9ca3af;
+}
+
+.base-button--danger {
+  background-color: #ef4444;
+  color: white;
+}
+
+.base-button--danger:hover:not(:disabled) {
+  background-color: #dc2626;
+}
+
+.base-button--danger:active:not(:disabled) {
+  background-color: #b91c1c;
+}
+
+.base-button--ghost {
+  background-color: transparent;
+  color: #3b82f6;
+  border: 1px solid transparent;
+}
+
+.base-button--ghost:hover:not(:disabled) {
+  background-color: #eff6ff;
+  border-color: #3b82f6;
+}
+
+.base-button--ghost:active:not(:disabled) {
+  background-color: #dbeafe;
+}
+
+.base-button--icon-only {
+  padding: 0.5rem;
+  background-color: transparent;
+  color: #6b7280;
+}
+
+.base-button--icon-only:hover:not(:disabled) {
+  background-color: #f3f4f6;
+  color: #1f2937;
+}
+
+.base-button--icon-only:active:not(:disabled) {
+  background-color: #e5e7eb;
+}
+
+/* States */
+.base-button:disabled,
+.base-button--disabled,
+.base-button--loading {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.base-button--full-width {
+  width: 100%;
+}
+
+/* Loading spinner */
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Icon spacing */
+.icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.icon-left {
+  margin-right: -0.25rem;
+}
+
+.icon-right {
+  margin-left: -0.25rem;
+}
+
+/* Screen reader only */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+</style>
diff --git a/docs/projects/Pokedex.Online/PROGRESS.md b/docs/projects/Pokedex.Online/PROGRESS.md
index 9e59222..f8ef8f1 100644
--- a/docs/projects/Pokedex.Online/PROGRESS.md
+++ b/docs/projects/Pokedex.Online/PROGRESS.md
@@ -7,7 +7,7 @@ Last Updated: January 28, 2026
 **Total Phases:** 12  
 **Completed Phases:** 1 (In Progress)  
 **Total Steps:** 68  
-**Completed Steps:** 4 / 68 (5.9%)
+**Completed Steps:** 5 / 68 (7.4%)
 
 ---
 
@@ -31,10 +31,10 @@ Last Updated: January 28, 2026
 - [x] Added test scripts to package.json
 
 ### ✅ Step 3: Split package.json Dependencies
-- [ ] Create `server/package.json` (backend only)
-- [ ] Update root package.json (frontend only)
-- [ ] Configure npm workspaces
-- [ ] Test both installs independently
+- [x] Create `server/package.json` (backend only)
+- [x] Update root package.json (frontend only)
+- [x] Configure npm workspaces
+- [x] Test both installs independently
 
 ---