From b171ac00c6e71749a4b889381061429c929bd9bf Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 2 Jun 2025 11:12:40 -0400
Subject: [PATCH 1/6] fix icon button disabled state

---
 src/components/IconButton.vue | 7 ++++++-
 src/types.ts                  | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 2123b1ff..555a35b2 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -19,6 +19,7 @@
         @touchend="handleTouchEnd"
         :style="cssVars"
         tabindex="0"
+        :aria-disabled="props.disabled"
       >
         <slot name="button">
           <font-awesome-icon
@@ -64,7 +65,8 @@ const props = withDefaults(defineProps<IconButtonProps>(), {
   tooltipOffset: 0,
   showTooltip: true,
   faSize: "lg",
-  mdSize: "1.25em"
+  mdSize: "1.25em",
+  disabled: false,
 });
 
 const emit = defineEmits<{
@@ -99,6 +101,9 @@ function updateValue() {
 }
 
 function handleAction() {
+  if (props.disabled) {
+    return;
+  }
   updateValue();
   emit('activate');
 }
diff --git a/src/types.ts b/src/types.ts
index d87b4d03..82582bab 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -160,6 +160,8 @@ export interface IconButtonProps {
   faSize?: SizeType;
   /** The size of the MDI icon. Should be a valid CSS size */
   mdSize?: string;
+  /** Disable the button and prevent actions from running: Defualt is false */
+  disabled?: boolean;
 }
 
 

From 8654d48885bb4c17bdc02f16d8b78086edc63daf Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 2 Jun 2025 11:54:27 -0400
Subject: [PATCH 2/6] fix disabled reference

---
 src/components/IconButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index 555a35b2..d59d4d68 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -19,7 +19,7 @@
         @touchend="handleTouchEnd"
         :style="cssVars"
         tabindex="0"
-        :aria-disabled="props.disabled"
+        :aria-disabled="disabled"
       >
         <slot name="button">
           <font-awesome-icon

From db87fc4fb78ed4f226a141c5b2db11ba2d6f50ed Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Mon, 2 Jun 2025 12:31:26 -0400
Subject: [PATCH 3/6] Add default value for disabled flag to icon button story.

---
 src/stories/IconButton.stories.ts | 5 ++++-
 src/stories/stories.css           | 4 ++++
 src/types.ts                      | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/stories/IconButton.stories.ts b/src/stories/IconButton.stories.ts
index a49f2c4b..7435ae25 100644
--- a/src/stories/IconButton.stories.ts
+++ b/src/stories/IconButton.stories.ts
@@ -7,6 +7,8 @@ import { IconButton } from "..";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
 
+import "./stories.css";
+
 library.add(faBookOpen);
 
 const meta: Meta<typeof IconButton> = {
@@ -47,6 +49,7 @@ export const Primary: Story = {
     tooltipOnHover: true,
     showTooltip: true,
     faSize: "lg",
-    mdSize: "100px"
+    mdSize: "100px",
+    disabled: false,
   }
 };
diff --git a/src/stories/stories.css b/src/stories/stories.css
index fb0b8a42..485bd997 100644
--- a/src/stories/stories.css
+++ b/src/stories/stories.css
@@ -2,3 +2,7 @@
   width: 100%;
   height: 100%;
 }
+
+.icon-wrapper[aria-disabled=true] {
+  color: gray;
+}
diff --git a/src/types.ts b/src/types.ts
index 82582bab..642ebacf 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -160,7 +160,7 @@ export interface IconButtonProps {
   faSize?: SizeType;
   /** The size of the MDI icon. Should be a valid CSS size */
   mdSize?: string;
-  /** Disable the button and prevent actions from running: Defualt is false */
+  /** Disable the button and prevent actions from running: Default is false */
   disabled?: boolean;
 }
 

From 4cb16dc9c21ec95784195ae1d333d486f963d256 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Mon, 9 Jun 2025 15:16:25 -0400
Subject: [PATCH 4/6] modify cursor and fallback tooltip styles for disabled
 state

---
 src/components/IconButton.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index d59d4d68..cb8d55ff 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -7,6 +7,7 @@
     :open-on-hover="tooltipOnHover"
     :offset="tooltipOffset"
     :disabled="!tooltipText || !showTooltip"
+    :class="['icon-button-v-tooltip', disabled ? 'disabled-tooltip' : '']"
   >
     <template v-slot:activator="{ props }: { props: Record<string,any> }">
       <div
@@ -149,5 +150,17 @@ function handleTouchEnd() {
     color: var(--active-color);
     border-color: var(--active-color);
   }
+  
+  &[aria-disabled="true"]:hover {
+    cursor: not-allowed;
+  }
+}
+
+.icon-button-v-tooltip {
+  
+  &.disabled-tooltip .v-overlay__content {
+    color: rgb(156, 156, 156); // fallback grey color for disabled state
+    color: color-mix(in hsl, currentColor, rgb(var(--v-theme-surface-variant)) 50%);
+  }
 }
 </style>

From 75ec55ebe2ad41e25e9598eb7a4c93144ebf8bb1 Mon Sep 17 00:00:00 2001
From: Carifio24 <carifio24@gmail.com>
Date: Thu, 19 Jun 2025 11:09:54 -0400
Subject: [PATCH 5/6] Tweak story.

---
 src/stories/IconButton.stories.ts | 1 +
 src/stories/stories.css           | 4 ----
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/stories/IconButton.stories.ts b/src/stories/IconButton.stories.ts
index 7435ae25..1cacc258 100644
--- a/src/stories/IconButton.stories.ts
+++ b/src/stories/IconButton.stories.ts
@@ -38,6 +38,7 @@ export const Primary: Story = {
     mdIcon: null,
     color: "white",
     focusColor: "red",
+    activeColor: "green",
     backgroundColor: "#040404",
     boxShadow: true,
     border: true,
diff --git a/src/stories/stories.css b/src/stories/stories.css
index 485bd997..fb0b8a42 100644
--- a/src/stories/stories.css
+++ b/src/stories/stories.css
@@ -2,7 +2,3 @@
   width: 100%;
   height: 100%;
 }
-
-.icon-wrapper[aria-disabled=true] {
-  color: gray;
-}

From 5a0c02e2fde212f4c5be81823b8709b29acab807 Mon Sep 17 00:00:00 2001
From: John Arban Lewis <johnarban@users.noreply.github.com>
Date: Tue, 30 Sep 2025 15:49:07 -0400
Subject: [PATCH 6/6] update disabled color

---
 src/components/IconButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/IconButton.vue b/src/components/IconButton.vue
index cb8d55ff..460dfab8 100644
--- a/src/components/IconButton.vue
+++ b/src/components/IconButton.vue
@@ -160,7 +160,7 @@ function handleTouchEnd() {
   
   &.disabled-tooltip .v-overlay__content {
     color: rgb(156, 156, 156); // fallback grey color for disabled state
-    color: color-mix(in hsl, currentColor, rgb(var(--v-theme-surface-variant)) 50%);
+    color: color-mix(in hsl, currentColor, rgb(var(--v-theme-on-surface-variant)) 80%);
   }
 }
 </style>