From 10a10e2f7756ad4a7f7281c0b69883c3e62f9855 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Jun 2025 18:33:21 +0100
Subject: [PATCH 01/11] UUICard: adds "uui-checkbox" dependency

---
 package-lock.json               | 3 ++-
 packages/uui-card/package.json  | 3 ++-
 packages/uui-card/tsconfig.json | 3 +++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b4b12676a..344f5501b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20385,7 +20385,8 @@
       "version": "1.14.1",
       "license": "MIT",
       "dependencies": {
-        "@umbraco-ui/uui-base": "1.14.1"
+        "@umbraco-ui/uui-base": "1.14.1",
+        "@umbraco-ui/uui-checkbox": "1.14.1"
       }
     },
     "packages/uui-card-block-type": {
diff --git a/packages/uui-card/package.json b/packages/uui-card/package.json
index 3bbe43ffd..d23b2c065 100644
--- a/packages/uui-card/package.json
+++ b/packages/uui-card/package.json
@@ -30,7 +30,8 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.14.1"
+    "@umbraco-ui/uui-base": "1.14.1",
+    "@umbraco-ui/uui-checkbox": "1.14.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
diff --git a/packages/uui-card/tsconfig.json b/packages/uui-card/tsconfig.json
index 40d176776..b11c43166 100644
--- a/packages/uui-card/tsconfig.json
+++ b/packages/uui-card/tsconfig.json
@@ -12,6 +12,9 @@
   "references": [
     {
       "path": "../uui-base"
+    },
+    {
+      "path": "../uui-checkbox"
     }
   ]
 }

From 7e23cf7ec03138d5457dd97d794676596f8cbcb7 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Jun 2025 18:34:18 +0100
Subject: [PATCH 02/11] Adds `renderCheckbox()` method to "uui-card" component

---
 packages/uui-card/lib/uui-card.element.ts | 30 +++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
index a262a0e91..f48fd02d3 100644
--- a/packages/uui-card/lib/uui-card.element.ts
+++ b/packages/uui-card/lib/uui-card.element.ts
@@ -9,6 +9,8 @@ import { property } from 'lit/decorators.js';
 
 import { UUICardEvent } from './UUICardEvent';
 
+import '@umbraco-ui/uui-checkbox/lib';
+
 /**
  *  Card is a Component that provides the basics for a Card component. This can be extended in code to match a certain need.
  *  @element uui-card
@@ -83,6 +85,19 @@ export class UUICardElement extends SelectOnlyMixin(
     this.dispatchEvent(new UUICardEvent(UUICardEvent.OPEN));
   }
 
+  protected renderCheckbox() {
+    if (!this.selectable) return;
+    return html`
+      <uui-checkbox
+        id="select-checkbox"
+        label="select"
+        ?checked=${this.selected}
+        @click=${(e: MouseEvent) => e.stopPropagation()}
+        @change=${() => this.click()}>
+      </uui-checkbox>
+    `;
+  }
+
   protected render() {
     return html`<slot id="open-part"></slot>
       <div id="select-border"></div>`;
@@ -236,6 +251,21 @@ export class UUICardElement extends SelectOnlyMixin(
         background: var(--uui-color-disabled);
         color: var(--uui-color-disabled-contrast);
       }
+
+      #select-checkbox {
+        position: absolute;
+        top: var(--uui-size-4);
+        left: var(--uui-size-4);
+        opacity: 0;
+        transition: opacity 120ms;
+        z-index: 3;
+      }
+      :host(:focus) #select-checkbox,
+      :host(:focus-within) #select-checkbox,
+      :host(:hover) #select-checkbox,
+      #select-checkbox[checked] {
+        opacity: 1;
+      }
     `,
   ];
 }

From d4bda1934777e185de42e95112baca1deffe5cf5 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Jun 2025 18:37:18 +0100
Subject: [PATCH 03/11] "uui-card-media": adds `renderCheckbox()`

---
 packages/uui-card-media/lib/uui-card-media.element.ts | 3 +--
 packages/uui-card-media/lib/uui-card-media.story.ts   | 7 +++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 504a6e058..deb1730c1 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -118,7 +118,7 @@ export class UUICardMediaElement extends UUICardElement {
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after .open-part -->
       <div id="select-border"></div>
-
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>`;
   }
@@ -208,7 +208,6 @@ export class UUICardMediaElement extends UUICardElement {
       #content {
         position: relative;
         display: flex;
-        width: 100%;
         flex-direction: column;
         font-family: inherit;
         box-sizing: border-box;
diff --git a/packages/uui-card-media/lib/uui-card-media.story.ts b/packages/uui-card-media/lib/uui-card-media.story.ts
index 99c60093e..0a7cb1b7c 100644
--- a/packages/uui-card-media/lib/uui-card-media.story.ts
+++ b/packages/uui-card-media/lib/uui-card-media.story.ts
@@ -92,3 +92,10 @@ export const Image: Story = {
     chromatic: { disableSnapshot: true },
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

From 8b3e0dea095f6013ab2136de29b2c805f26b7f9c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Jun 2025 18:38:13 +0100
Subject: [PATCH 04/11] "uui-card-block-type": adds `renderCheckbox()`

---
 .../lib/uui-card-block-type.element.ts                |  2 +-
 .../lib/uui-card-block-type.story.ts                  | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index 3ef68439f..3804dfdcd 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -49,7 +49,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
-
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.story.ts b/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
index 82eef24b6..aea48cb11 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
@@ -70,8 +70,13 @@ export const Background: Story = {
 
 export const Image: Story = {
   args: {
-    slot: html`<img
-      src="https://umbraco.com/media/v5gf3w2a/umbraco-toolkit-wide.svg"
-      alt="" />`,
+    slot: html`<img src="https://placedog.net/1447/?random" alt="" />`,
+  },
+};
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
   },
 };

From ff83793062f60ea0a62a6827f9c3e5939a86a6f2 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Jun 2025 18:38:39 +0100
Subject: [PATCH 05/11] "uui-card-content-node": adds `renderCheckbox()`

---
 .../lib/uui-card-content-node.element.ts                   | 7 ++++++-
 .../lib/uui-card-content-node.story.ts                     | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
index 674ec4530..f6c1c41fd 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
+++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
@@ -116,7 +116,7 @@ export class UUICardContentNodeElement extends UUICardElement {
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
-
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
@@ -226,6 +226,11 @@ export class UUICardContentNodeElement extends UUICardElement {
       :host(:not([disabled])) #open-part:hover #default {
         color: var(--uui-color-interactive-emphasis);
       }
+
+      #select-checkbox {
+        top: var(--uui-size-5);
+        left: var(--uui-size-6);
+      }
     `,
   ];
 }
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.story.ts b/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
index 096c72430..f1bc289f1 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
+++ b/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
@@ -76,3 +76,10 @@ export const CustomIcon: Story = {
     'icon slot': html`<uui-icon slot="icon" name="wand"></uui-icon>`,
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

From 3928a5f2a40ce7597d58d765413720cf149d6cf5 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 30 Jun 2025 18:38:57 +0100
Subject: [PATCH 06/11] "uui-card-user": adds `renderCheckbox()`

---
 packages/uui-card-user/lib/uui-card-user.element.ts | 1 +
 packages/uui-card-user/lib/uui-card-user.story.ts   | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
index 52dc654e9..2f69bb639 100644
--- a/packages/uui-card-user/lib/uui-card-user.element.ts
+++ b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -87,6 +87,7 @@ export class UUICardUserElement extends UUICardElement {
       ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
+      ${this.selectable ? this.renderCheckbox() : nothing}
       <slot name="tag"></slot>
       <slot name="actions"></slot>
     `;
diff --git a/packages/uui-card-user/lib/uui-card-user.story.ts b/packages/uui-card-user/lib/uui-card-user.story.ts
index b9f8183a0..f9fa5d41a 100644
--- a/packages/uui-card-user/lib/uui-card-user.story.ts
+++ b/packages/uui-card-user/lib/uui-card-user.story.ts
@@ -76,3 +76,10 @@ export const Actions: Story = {
     >`,
   },
 };
+
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+    selectOnly: true,
+  },
+};

From 3b455cda704487bf4b13744adb053c08d50f3cc1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 8 Jul 2025 16:18:56 +0100
Subject: [PATCH 07/11] Updates card stories with "Only Selectable"

removing "selectOnly" from the "Selectable" story
---
 .../uui-card-block-type/lib/uui-card-block-type.story.ts    | 6 ++++++
 .../lib/uui-card-content-node.story.ts                      | 6 ++++++
 packages/uui-card-media/lib/uui-card-media.story.ts         | 6 ++++++
 packages/uui-card-user/lib/uui-card-user.story.ts           | 6 ++++++
 4 files changed, 24 insertions(+)

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.story.ts b/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
index aea48cb11..9b3af198d 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.story.ts
@@ -75,6 +75,12 @@ export const Image: Story = {
 };
 
 export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
   args: {
     selectable: true,
     selectOnly: true,
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.story.ts b/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
index f1bc289f1..6e89af8e8 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
+++ b/packages/uui-card-content-node/lib/uui-card-content-node.story.ts
@@ -78,6 +78,12 @@ export const CustomIcon: Story = {
 };
 
 export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
   args: {
     selectable: true,
     selectOnly: true,
diff --git a/packages/uui-card-media/lib/uui-card-media.story.ts b/packages/uui-card-media/lib/uui-card-media.story.ts
index 0a7cb1b7c..722b4aeac 100644
--- a/packages/uui-card-media/lib/uui-card-media.story.ts
+++ b/packages/uui-card-media/lib/uui-card-media.story.ts
@@ -94,6 +94,12 @@ export const Image: Story = {
 };
 
 export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
   args: {
     selectable: true,
     selectOnly: true,
diff --git a/packages/uui-card-user/lib/uui-card-user.story.ts b/packages/uui-card-user/lib/uui-card-user.story.ts
index f9fa5d41a..ad16117d7 100644
--- a/packages/uui-card-user/lib/uui-card-user.story.ts
+++ b/packages/uui-card-user/lib/uui-card-user.story.ts
@@ -78,6 +78,12 @@ export const Actions: Story = {
 };
 
 export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
+};
+
+export const OnlySelectable: Story = {
   args: {
     selectable: true,
     selectOnly: true,

From 3ce8d1383c8680e4a4dc05d93b7973df85a8b5f3 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 8 Jul 2025 16:21:19 +0100
Subject: [PATCH 08/11] Removed navigatable focus from the select-checkbox

---
 packages/uui-card/lib/uui-card.element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/uui-card/lib/uui-card.element.ts b/packages/uui-card/lib/uui-card.element.ts
index f48fd02d3..2d9f65c1f 100644
--- a/packages/uui-card/lib/uui-card.element.ts
+++ b/packages/uui-card/lib/uui-card.element.ts
@@ -91,6 +91,7 @@ export class UUICardElement extends SelectOnlyMixin(
       <uui-checkbox
         id="select-checkbox"
         label="select"
+        tabindex="-1"
         ?checked=${this.selected}
         @click=${(e: MouseEvent) => e.stopPropagation()}
         @change=${() => this.click()}>

From e1886fcd69ea7f55b22865628ec2c9c8e89d6bd6 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 8 Jul 2025 16:26:56 +0100
Subject: [PATCH 09/11] Set cards `tabindex=-1` when `selectOnly` is enabled

---
 .../lib/uui-card-block-type.element.ts        |  6 ++-
 .../lib/uui-card-content-node.element.ts      | 46 +++++++++++--------
 .../lib/uui-card-media.element.ts             |  6 ++-
 .../lib/uui-card-user.element.ts              | 46 +++++++++++--------
 4 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index 3804dfdcd..06a6a0d92 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -56,11 +56,12 @@ export class UUICardBlockTypeElement extends UUICardElement {
   }
 
   #renderButton() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <button
         id="open-part"
         class="uui-text"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
         ${this.#renderContent()}
@@ -69,11 +70,12 @@ export class UUICardBlockTypeElement extends UUICardElement {
   }
 
   #renderLink() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <a
         id="open-part"
         class="uui-text"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
         rel=${ifDefined(
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
index f6c1c41fd..83249807e 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
+++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
@@ -86,29 +86,35 @@ export class UUICardContentNodeElement extends UUICardElement {
   }
 
   #renderButton() {
-    return html`<button
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : 0}
-      @click=${this.handleOpenClick}
-      @keydown=${this.handleOpenKeydown}>
-      ${this.#renderContent()}
-    </button>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <button
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${this.#renderContent()}
+      </button>
+    `;
   }
 
   #renderLink() {
-    return html`<a
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : 0}
-      href=${ifDefined(!this.disabled ? this.href : undefined)}
-      target=${ifDefined(this.target || undefined)}
-      rel=${ifDefined(
-        this.rel ||
-          ifDefined(
-            this.target === '_blank' ? 'noopener noreferrer' : undefined,
-          ),
-      )}>
-      ${this.#renderContent()}
-    </a>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(
+          this.rel ||
+            ifDefined(
+              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            ),
+        )}>
+        ${this.#renderContent()}
+      </a>
+    `;
   }
 
   public render() {
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index deb1730c1..0a538da33 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -71,10 +71,11 @@ export class UUICardMediaElement extends UUICardElement {
   }
 
   #renderButton() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <button
         id="open-part"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}>
         ${this.#renderContent()}
@@ -83,10 +84,11 @@ export class UUICardMediaElement extends UUICardElement {
   }
 
   #renderLink() {
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
     return html`
       <a
         id="open-part"
-        tabindex=${this.disabled ? (nothing as any) : '0'}
+        tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
         rel=${ifDefined(
diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
index 2f69bb639..169aecb3b 100644
--- a/packages/uui-card-user/lib/uui-card-user.element.ts
+++ b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -40,29 +40,35 @@ export class UUICardUserElement extends UUICardElement {
   }
 
   #renderButton() {
-    return html`<div
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : '0'}
-      @click=${this.handleOpenClick}
-      @keydown=${this.handleOpenKeydown}>
-      ${this.#renderContent()}
-    </div>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <div
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        @click=${this.handleOpenClick}
+        @keydown=${this.handleOpenKeydown}>
+        ${this.#renderContent()}
+      </div>
+    `;
   }
 
   #renderLink() {
-    return html`<a
-      id="open-part"
-      tabindex=${this.disabled ? (nothing as any) : '0'}
-      href=${ifDefined(!this.disabled ? this.href : undefined)}
-      target=${ifDefined(this.target || undefined)}
-      rel=${ifDefined(
-        this.rel ||
-          ifDefined(
-            this.target === '_blank' ? 'noopener noreferrer' : undefined,
-          ),
-      )}>
-      ${this.#renderContent()}
-    </a>`;
+    const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    return html`
+      <a
+        id="open-part"
+        tabindex=${ifDefined(tabIndex)}
+        href=${ifDefined(!this.disabled ? this.href : undefined)}
+        target=${ifDefined(this.target || undefined)}
+        rel=${ifDefined(
+          this.rel ||
+            ifDefined(
+              this.target === '_blank' ? 'noopener noreferrer' : undefined,
+            ),
+        )}>
+        ${this.#renderContent()}
+      </a>
+    `;
   }
 
   #renderContent() {

From 37a085b6593e47ad90184aac3bcbd5fb32dfbd4b Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 8 Jul 2025 16:28:01 +0100
Subject: [PATCH 10/11] Refactored `rel` attribute value/markup

---
 .../lib/uui-card-block-type.element.ts                    | 8 ++------
 .../lib/uui-card-content-node.element.ts                  | 8 ++------
 packages/uui-card-media/lib/uui-card-media.element.ts     | 8 ++------
 packages/uui-card-user/lib/uui-card-user.element.ts       | 8 ++------
 4 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index 06a6a0d92..1add9c486 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -71,6 +71,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
 
   #renderLink() {
     const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
     return html`
       <a
         id="open-part"
@@ -78,12 +79,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
         tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
-        rel=${ifDefined(
-          this.rel ||
-            ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            ),
-        )}>
+        rel=${ifDefined(this.rel || rel)}>
         ${this.#renderContent()}
       </a>
     `;
diff --git a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
index 83249807e..3a3edd6e8 100644
--- a/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
+++ b/packages/uui-card-content-node/lib/uui-card-content-node.element.ts
@@ -100,18 +100,14 @@ export class UUICardContentNodeElement extends UUICardElement {
 
   #renderLink() {
     const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
     return html`
       <a
         id="open-part"
         tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
-        rel=${ifDefined(
-          this.rel ||
-            ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            ),
-        )}>
+        rel=${ifDefined(this.rel || rel)}>
         ${this.#renderContent()}
       </a>
     `;
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index 0a538da33..7e130ad41 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -85,18 +85,14 @@ export class UUICardMediaElement extends UUICardElement {
 
   #renderLink() {
     const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
     return html`
       <a
         id="open-part"
         tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
-        rel=${ifDefined(
-          this.rel ||
-            ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            ),
-        )}>
+        rel=${ifDefined(this.rel || rel)}>
         ${this.#renderContent()}
       </a>
     `;
diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
index 169aecb3b..8afeb3ed6 100644
--- a/packages/uui-card-user/lib/uui-card-user.element.ts
+++ b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -54,18 +54,14 @@ export class UUICardUserElement extends UUICardElement {
 
   #renderLink() {
     const tabIndex = !this.disabled ? (this.selectOnly ? -1 : 0) : undefined;
+    const rel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
     return html`
       <a
         id="open-part"
         tabindex=${ifDefined(tabIndex)}
         href=${ifDefined(!this.disabled ? this.href : undefined)}
         target=${ifDefined(this.target || undefined)}
-        rel=${ifDefined(
-          this.rel ||
-            ifDefined(
-              this.target === '_blank' ? 'noopener noreferrer' : undefined,
-            ),
-        )}>
+        rel=${ifDefined(this.rel || rel)}>
         ${this.#renderContent()}
       </a>
     `;

From 122721ec98d707b3339131a9d0b58ae8113f99f1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 8 Jul 2025 16:28:23 +0100
Subject: [PATCH 11/11] Cards markup tidy-up

---
 .../lib/uui-card-block-type.element.ts        |  2 +-
 .../lib/uui-card-user.element.ts              | 30 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
index 1add9c486..9edb3c03a 100644
--- a/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
+++ b/packages/uui-card-block-type/lib/uui-card-block-type.element.ts
@@ -95,7 +95,7 @@ export class UUICardBlockTypeElement extends UUICardElement {
     return html`
       <div id="content">
         <span title="${this.name}" id="name">${this.name}</span>
-        <small title="${this.description}">${this.description}<slot name="description"></slot></small>
+        <small title="${ifDefined(this.description)}">${this.description}<slot name="description"></slot></small>
       </div></div>
     `;
   }
diff --git a/packages/uui-card-user/lib/uui-card-user.element.ts b/packages/uui-card-user/lib/uui-card-user.element.ts
index 8afeb3ed6..8fcc85847 100644
--- a/packages/uui-card-user/lib/uui-card-user.element.ts
+++ b/packages/uui-card-user/lib/uui-card-user.element.ts
@@ -68,20 +68,22 @@ export class UUICardUserElement extends UUICardElement {
   }
 
   #renderContent() {
-    return html`<div id="content">
-      ${this._avatarSlotHasContent
-        ? nothing
-        : html`<uui-avatar
-            class="avatar"
-            name=${this.name}
-            size="m"></uui-avatar>`}
-      <slot
-        name="avatar"
-        class="avatar"
-        @slotchange=${this._avatarSlotChanged}></slot>
-      <span title="${this.name}">${this.name}</span>
-      <slot></slot>
-    </div>`;
+    return html`
+      <div id="content">
+        ${this._avatarSlotHasContent
+          ? nothing
+          : html`<uui-avatar
+              class="avatar"
+              name=${this.name}
+              size="m"></uui-avatar>`}
+        <slot
+          name="avatar"
+          class="avatar"
+          @slotchange=${this._avatarSlotChanged}></slot>
+        <span title="${this.name}">${this.name}</span>
+        <slot></slot>
+      </div>
+    `;
   }
 
   public render() {