From c81593a0d9fac37a9917af1f6719bbe96ae1f730 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 27 Mar 2026 19:49:16 -0400
Subject: [PATCH 1/5] feat(Alert): add condensed view support

Add data-slot attributes to Alert, AlertTitle, AlertDescription, and
dismiss button. Add condensed CSS rules for tighter padding, smaller
text, repositioned icon, and compact dismiss button.
---
 src/components/Alert/Alert.tsx |  4 ++++
 src/styles/condensed-view.css  | 41 ++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 3a3b6deb..bb6a0fb1 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -71,6 +71,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <div
         ref={ref}
         role="alert"
+        data-slot="alert"
         className={cn(
           alertVariants({ variant }),
           React.isValidElement(icon) && 'pl-11',
@@ -84,6 +85,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
         {dismissible && (
           <button
             type="button"
+            data-slot="alert-dismiss"
             onClick={onDismiss}
             className={cn(
               'absolute top-2 right-2 rounded-md p-1',
@@ -112,6 +114,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <h5
     ref={ref}
+    data-slot="alert-title"
     className={cn('mb-1 leading-none font-semibold tracking-tight', className)}
     {...props}
   >
@@ -130,6 +133,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
+    data-slot="alert-description"
     className={cn('text-sm [&_p]:leading-relaxed', className)}
     {...props}
   />
diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 1e477941..7bb58e7c 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -50,6 +50,47 @@ body.condensed
   max-height: 200px;
 }
 
+/* Alert — tighter padding, smaller text */
+body.condensed [data-slot='alert'] {
+  padding: 0.375rem 0.5rem !important;
+  border-radius: 4px !important;
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+}
+
+body.condensed [data-slot='alert'] > svg {
+  left: 0.5rem !important;
+  top: 0.375rem !important;
+  width: 0.875rem !important;
+  height: 0.875rem !important;
+}
+
+body.condensed [data-slot='alert'].pl-11 {
+  padding-left: 1.75rem !important;
+}
+
+body.condensed [data-slot='alert-title'] {
+  margin-bottom: 0.125rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
+body.condensed [data-slot='alert-description'] {
+  font-size: 0.6875rem !important;
+  line-height: 1rem !important;
+}
+
+body.condensed [data-slot='alert-dismiss'] {
+  top: 0.25rem !important;
+  right: 0.25rem !important;
+  padding: 0.125rem !important;
+}
+
+body.condensed [data-slot='alert-dismiss'] svg {
+  width: 0.75rem !important;
+  height: 0.75rem !important;
+}
+
 /* Avatar — single condensed size, square corners */
 body.condensed [data-slot='avatar'] {
   font-size: 0.625rem;

From 8311f1b7a2ddf343831fd30d12b8bd330ac08d47 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 27 Mar 2026 20:13:04 -0400
Subject: [PATCH 2/5] feat(ConnectionStatus): add condensed view support, fix
 broken logo default
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add data-slot attributes to ConnectionStatusOverlay, UpdateAvailableOverlay,
ConnectionStatusBadge, and ConnectionStatusBar. Add condensed CSS rules for
compact cards, tighter badge pill, and thinner status bar.

Fix UpdateAvailableOverlay defaulting logoUrl to a non-existent asset path
which caused 404s in Storybook — now defaults to undefined so the inline
SVG fallback renders instead.
---
 .../ConnectionStatus/ConnectionStatus.tsx     | 30 +++++--
 src/styles/condensed-view.css                 | 78 +++++++++++++++++++
 2 files changed, 101 insertions(+), 7 deletions(-)

diff --git a/src/components/ConnectionStatus/ConnectionStatus.tsx b/src/components/ConnectionStatus/ConnectionStatus.tsx
index 6ba52cd5..7bd9f491 100644
--- a/src/components/ConnectionStatus/ConnectionStatus.tsx
+++ b/src/components/ConnectionStatus/ConnectionStatus.tsx
@@ -123,9 +123,13 @@ export function ConnectionStatusOverlay({
       role="alertdialog"
       aria-label="Connection status"
       aria-live="assertive"
+      data-slot="connection-overlay"
       className={cn(overlayVariants({ animate }), className)}
     >
-      <div className={cn(cardVariants({ animate }))}>
+      <div
+        data-slot="connection-overlay-card"
+        className={cn(cardVariants({ animate }))}
+      >
         <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
           {/* Icon */}
           <div className="shrink-0">
@@ -133,7 +137,7 @@ export function ConnectionStatusOverlay({
           </div>
 
           {/* Content */}
-          <div className="flex-1">
+          <div data-slot="connection-overlay-content" className="flex-1">
             <p className="text-gray-700 dark:text-gray-300">{displayMessage}</p>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Please check your internet connection.
@@ -151,6 +155,7 @@ export function ConnectionStatusOverlay({
           <div className="shrink-0">
             <button
               type="button"
+              data-slot="connection-overlay-action"
               onClick={onReload || (() => window.location.reload())}
               className="bg-primary-700 hover:bg-primary-800 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
             >
@@ -203,7 +208,7 @@ export function UpdateAvailableOverlay({
   isVisible = true,
   onUpdateNow,
   onLater,
-  logoUrl = '/images/logos/bluehive-icon-blue.svg',
+  logoUrl,
   appName = 'BlueHive',
   className,
 }: UpdateAvailableOverlayProps) {
@@ -214,9 +219,13 @@ export function UpdateAvailableOverlay({
       role="alertdialog"
       aria-label="Update available"
       aria-live="polite"
+      data-slot="update-overlay"
       className={cn(overlayVariants({ animate: true }), className)}
     >
-      <div className={cn(cardVariants({ animate: true }))}>
+      <div
+        data-slot="update-overlay-card"
+        className={cn(cardVariants({ animate: true }))}
+      >
         <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
           {/* Logo */}
           <div className="shrink-0">
@@ -232,7 +241,7 @@ export function UpdateAvailableOverlay({
           </div>
 
           {/* Content */}
-          <div className="flex-1">
+          <div data-slot="update-overlay-content" className="flex-1">
             <p className="font-semibold text-gray-900 dark:text-white">
               Update Available
             </p>
@@ -326,7 +335,10 @@ export function ConnectionStatusBadge({
   };
 
   return (
-    <span className={cn(badgeVariants({ status }), className)}>
+    <span
+      data-slot="connection-badge"
+      className={cn(badgeVariants({ status }), className)}
+    >
       <ConnectionDot status={status} />
       {showLabel && labels[status]}
     </span>
@@ -374,6 +386,7 @@ export function ConnectionStatusBar({
     <div
       role="status"
       aria-live="polite"
+      data-slot="connection-bar"
       className={cn(
         'fixed right-0 left-0 z-40 px-4 py-2',
         position === 'top' ? 'top-0' : 'bottom-0',
@@ -383,7 +396,10 @@ export function ConnectionStatusBar({
         className
       )}
     >
-      <div className="container mx-auto flex items-center justify-center gap-2 text-sm">
+      <div
+        data-slot="connection-bar-content"
+        className="container mx-auto flex items-center justify-center gap-2 text-sm"
+      >
         <ConnectionDot status={connection.status} />
         <span>
           {connection.status === 'disconnected' && 'You are offline'}
diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 7bb58e7c..300282b2 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -91,6 +91,84 @@ body.condensed [data-slot='alert-dismiss'] svg {
   height: 0.75rem !important;
 }
 
+/* ConnectionStatusOverlay — compact card */
+body.condensed [data-slot='connection-overlay-card'] {
+  padding: 1rem !important;
+  border-radius: 0.5rem !important;
+  max-width: 28rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-card'] svg.h-12 {
+  height: 2rem !important;
+  width: 2rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-content'] p {
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+  margin-top: 0.25rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-action'] {
+  padding: 0.25rem 0.75rem !important;
+  font-size: 0.75rem !important;
+  border-radius: 0.375rem !important;
+  gap: 0.25rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-action'] svg {
+  height: 0.75rem !important;
+  width: 0.75rem !important;
+}
+
+/* UpdateAvailableOverlay — compact card */
+body.condensed [data-slot='update-overlay-card'] {
+  padding: 1rem !important;
+  border-radius: 0.5rem !important;
+  max-width: 28rem !important;
+}
+
+body.condensed [data-slot='update-overlay-card'] img {
+  height: 2rem !important;
+  width: 2rem !important;
+}
+
+body.condensed [data-slot='update-overlay-content'] p {
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+  margin-top: 0.25rem !important;
+}
+
+body.condensed [data-slot='update-overlay-card'] button {
+  padding: 0.25rem 0.75rem !important;
+  font-size: 0.75rem !important;
+  border-radius: 0.375rem !important;
+}
+
+/* ConnectionStatusBadge — tighter pill */
+body.condensed [data-slot='connection-badge'] {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.625rem !important;
+  line-height: 1rem !important;
+  gap: 0.25rem !important;
+  border-radius: 2px !important;
+}
+
+body.condensed [data-slot='connection-badge'] span {
+  height: 0.375rem !important;
+  width: 0.375rem !important;
+}
+
+/* ConnectionStatusBar — thinner bar */
+body.condensed [data-slot='connection-bar'] {
+  padding: 0.25rem 0.5rem !important;
+}
+
+body.condensed [data-slot='connection-bar-content'] {
+  font-size: 0.6875rem !important;
+  gap: 0.25rem !important;
+}
+
 /* Avatar — single condensed size, square corners */
 body.condensed [data-slot='avatar'] {
   font-size: 0.625rem;

From ec1d1f8943a8cb7f19a0b101cfdcf3cf38a939ae Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 27 Mar 2026 20:22:27 -0400
Subject: [PATCH 3/5] fix(Alert): add condensed pr-10 override for dismissible
 alerts

---
 src/styles/condensed-view.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 300282b2..5cf451d4 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -69,6 +69,10 @@ body.condensed [data-slot='alert'].pl-11 {
   padding-left: 1.75rem !important;
 }
 
+body.condensed [data-slot='alert'].pr-10 {
+  padding-right: 1.75rem !important;
+}
+
 body.condensed [data-slot='alert-title'] {
   margin-bottom: 0.125rem !important;
   font-size: 0.75rem !important;

From 357e9ea2fb236d87982a1bf235f031c394349396 Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 27 Mar 2026 20:28:06 -0400
Subject: [PATCH 4/5] fix(ConnectionStatus): address review feedback

- Use p + p selectors for margin-top in overlay content paragraphs
- Add svg.h-12 selector for UpdateAvailableOverlay SVG fallback icon
- Change appName default from 'BlueHive' to 'App' (generic library)
---
 src/components/ConnectionStatus/ConnectionStatus.tsx | 2 +-
 src/styles/condensed-view.css                        | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/ConnectionStatus/ConnectionStatus.tsx b/src/components/ConnectionStatus/ConnectionStatus.tsx
index 7bd9f491..1061a5fc 100644
--- a/src/components/ConnectionStatus/ConnectionStatus.tsx
+++ b/src/components/ConnectionStatus/ConnectionStatus.tsx
@@ -209,7 +209,7 @@ export function UpdateAvailableOverlay({
   onUpdateNow,
   onLater,
   logoUrl,
-  appName = 'BlueHive',
+  appName = 'App',
   className,
 }: UpdateAvailableOverlayProps) {
   if (!isVisible || !update.available) return null;
diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 5cf451d4..703db5c0 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -110,6 +110,9 @@ body.condensed [data-slot='connection-overlay-card'] svg.h-12 {
 body.condensed [data-slot='connection-overlay-content'] p {
   font-size: 0.75rem !important;
   line-height: 1.125rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-content'] p + p {
   margin-top: 0.25rem !important;
 }
 
@@ -132,7 +135,8 @@ body.condensed [data-slot='update-overlay-card'] {
   max-width: 28rem !important;
 }
 
-body.condensed [data-slot='update-overlay-card'] img {
+body.condensed [data-slot='update-overlay-card'] img,
+body.condensed [data-slot='update-overlay-card'] svg.h-12 {
   height: 2rem !important;
   width: 2rem !important;
 }
@@ -140,6 +144,9 @@ body.condensed [data-slot='update-overlay-card'] img {
 body.condensed [data-slot='update-overlay-content'] p {
   font-size: 0.75rem !important;
   line-height: 1.125rem !important;
+}
+
+body.condensed [data-slot='update-overlay-content'] p + p {
   margin-top: 0.25rem !important;
 }
 

From 3faebb1708b3767c00aef23e2940a9fe4da3c55d Mon Sep 17 00:00:00 2001
From: william garrity <wgarrity@mieweb.com>
Date: Fri, 27 Mar 2026 20:45:07 -0400
Subject: [PATCH 5/5] feat(ServiceBadge): add condensed view support

Add data-slot attributes to ServiceBadge (all 3 render paths), remove
button, ServiceBadgeGroup, ServiceTagCloudBadges, SelectedServicesBadges,
and DOTBadge. Add condensed CSS rules for tighter padding, smaller text,
square corners, and reduced gap in group containers.
---
 src/components/ServiceBadge/ServiceBadge.tsx | 21 +++++++--
 src/styles/condensed-view.css                | 45 ++++++++++++++++++++
 2 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/src/components/ServiceBadge/ServiceBadge.tsx b/src/components/ServiceBadge/ServiceBadge.tsx
index f1e24a25..9d084efd 100644
--- a/src/components/ServiceBadge/ServiceBadge.tsx
+++ b/src/components/ServiceBadge/ServiceBadge.tsx
@@ -125,6 +125,7 @@ export function ServiceBadge({
       {removable && onRemove && (
         <button
           type="button"
+          data-slot="service-badge-remove"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -152,6 +153,7 @@ export function ServiceBadge({
     return (
       <a
         href={href}
+        data-slot="service-badge"
         className={classes}
         {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
       >
@@ -164,6 +166,7 @@ export function ServiceBadge({
     return (
       <button
         type="button"
+        data-slot="service-badge"
         onClick={onClick}
         className={classes}
         {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
@@ -174,7 +177,7 @@ export function ServiceBadge({
   }
 
   return (
-    <span className={classes} {...props}>
+    <span data-slot="service-badge" className={classes} {...props}>
       {content}
     </span>
   );
@@ -204,7 +207,10 @@ export function ServiceBadgeGroup({
   const hiddenCount = maxVisible ? badges.length - maxVisible : 0;
 
   return (
-    <div className={cn('flex flex-wrap gap-2', className)}>
+    <div
+      data-slot="service-badge-group"
+      className={cn('flex flex-wrap gap-2', className)}
+    >
       {visibleBadges}
       {hiddenCount > 0 && (
         <ServiceBadge
@@ -290,7 +296,10 @@ export function ServiceTagCloudBadges({
   const hiddenCount = maxVisible ? services.length - maxVisible : 0;
 
   return (
-    <div className={cn('flex flex-wrap gap-2', className)}>
+    <div
+      data-slot="service-tag-cloud"
+      className={cn('flex flex-wrap gap-2', className)}
+    >
       {visibleServices.map((service) => (
         <ServiceBadge
           key={service.id}
@@ -346,7 +355,10 @@ export function SelectedServicesBadges({
   }
 
   return (
-    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+    <div
+      data-slot="selected-services"
+      className={cn('flex flex-wrap items-center gap-2', className)}
+    >
       {services.map((service) => (
         <ServiceBadge
           key={service.id}
@@ -436,6 +448,7 @@ export function DOTBadge({
 
   return (
     <span
+      data-slot="dot-badge"
       className={cn(
         'inline-flex items-center rounded-md font-medium',
         config.className,
diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 703db5c0..3e5877c1 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -180,6 +180,51 @@ body.condensed [data-slot='connection-bar-content'] {
   gap: 0.25rem !important;
 }
 
+/* ServiceBadge — tighter padding, smaller text, square corners */
+body.condensed [data-slot='service-badge'] {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.625rem !important;
+  line-height: 1rem !important;
+  border-radius: 2px !important;
+  gap: 0.125rem !important;
+}
+
+body.condensed [data-slot='service-badge'] svg {
+  width: 0.625rem !important;
+  height: 0.625rem !important;
+}
+
+body.condensed [data-slot='service-badge-remove'] {
+  padding: 0.0625rem !important;
+  margin-left: 0.125rem !important;
+}
+
+body.condensed [data-slot='service-badge-remove'] svg {
+  width: 0.5rem !important;
+  height: 0.5rem !important;
+}
+
+/* ServiceBadgeGroup / ServiceTagCloud / SelectedServices — tighter gap */
+body.condensed [data-slot='service-badge-group'],
+body.condensed [data-slot='service-tag-cloud'],
+body.condensed [data-slot='selected-services'] {
+  gap: 0.25rem !important;
+}
+
+/* DOTBadge — compact */
+body.condensed [data-slot='dot-badge'] {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.625rem !important;
+  line-height: 1rem !important;
+  border-radius: 2px !important;
+}
+
+body.condensed [data-slot='dot-badge'] svg {
+  width: 0.625rem !important;
+  height: 0.625rem !important;
+  margin-right: 0.125rem !important;
+}
+
 /* Avatar — single condensed size, square corners */
 body.condensed [data-slot='avatar'] {
   font-size: 0.625rem;