From b48ea339b4dcd747656f13bcbe7334870cc30689 Mon Sep 17 00:00:00 2001
From: Jacob Welander Jensen <64834767+Welander1994@users.noreply.github.com>
Date: Tue, 28 Oct 2025 10:47:53 +0100
Subject: [PATCH 1/8] adds new stories for forcus state

---
 .../lib/uui-ref-node-data-type.story.ts       | 13 ++++++++++++
 .../lib/uui-ref-node-document-type.story.ts   | 21 +++++++++++++++++--
 .../lib/uui-ref-node-form.story.ts            | 13 ++++++++++++
 .../lib/uui-ref-node-member.story.ts          | 14 +++++++++++++
 .../lib/uui-ref-node-package.story.ts         | 13 ++++++++++++
 .../lib/uui-ref-node-user.story.ts            | 14 +++++++++++++
 .../uui-ref-node/lib/uui-ref-node.element.ts  |  9 ++++++++
 .../uui-ref-node/lib/uui-ref-node.story.ts    | 15 +++++++++++++
 8 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
index 683ae1126..b10944acf 100644
--- a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
+++ b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-data-type',
   component: 'uui-ref-node-data-type',
@@ -66,3 +71,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-document-type
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index 72484e59a..a45b8a0eb 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-document-type',
   component: 'uui-ref-node-document-type',
@@ -13,9 +18,13 @@ const meta: Meta = {
     alias: 'productPage',
   },
   render: args =>
-    html`<uui-ref-node-document-type ${spread(args)}
+    html`<uui-ref-node-document-type
+      id="refNode"
+      ${spread(args)}
+      @open=${() => onOpen()}
       >${renderSlots(args)}</uui-ref-node-document-type
-    >`,
+    > `,
+
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
@@ -66,3 +75,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-document-type
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index ff15af6f3..dd6bb4089 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-form',
   component: 'uui-ref-node-form',
@@ -66,3 +71,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-document-type
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index c4ef963f4..332edb908 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-member',
   component: 'uui-ref-node-member',
@@ -66,3 +71,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-member id="refNode" ${spread(args)}
+      >${renderSlots(args)}</uui-ref-node-document-type
+    >
+      <button @click=${() => setFocus()}>Set focus</button>
+    `,
+};
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index 61e6194d8..e524bc4ee 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-package',
   component: 'uui-ref-node-package',
@@ -67,3 +72,11 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-package id="refNode" ${spread(args)}
+        >${renderSlots(args)}</uui-ref-node-package
+      >
+      <button @click=${() => setFocus()}>Set focus</button> `,
+};
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index 729b92fe2..fbe54dfc5 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -4,6 +4,11 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node-user',
   component: 'uui-ref-node-user',
@@ -66,3 +71,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node-user id="refNode" ${spread(args)}
+      >${renderSlots(args)}</uui-ref-node-package
+    >
+      <button @click=${() => setFocus()}>Set focus</button>
+    `,
+};
diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
index 15d8c818a..f93f80490 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.element.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -163,6 +163,11 @@ export class UUIRefNodeElement extends UUIRefElement {
     `;
   }
 
+  public focus() {
+    const openPart = this.renderRoot.querySelector('#open-part') as HTMLElement;
+    openPart?.focus();
+  }
+
   #renderOpenPart() {
     if (this.readonly) {
       return html`${this.#renderContent()}`;
@@ -228,6 +233,10 @@ export class UUIRefNodeElement extends UUIRefElement {
         }
       }
 
+      .test {
+        border: red 10px;
+      }
+
       :host(:not([disabled])) #open-part:hover #icon {
         color: var(--uui-color-interactive-emphasis);
       }
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index da35fad20..0c43bcc65 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -9,6 +9,12 @@ import '@umbraco-ui/uui-action-bar/lib';
 import '@umbraco-ui/uui-button/lib';
 import '@umbraco-ui/uui-icon/lib';
 
+const setFocus = () => {
+  const refElement = document.querySelectorAll('#refNode');
+  console.log(refElement[0]);
+  refElement[0].focus();
+};
+
 const meta: Meta = {
   id: 'uui-ref-node',
   component: 'uui-ref-node',
@@ -79,3 +85,12 @@ export const Readonly: Story = {
     readonly: true,
   },
 };
+
+export const Focus: Story = {
+  render: args =>
+    html`<uui-ref-node id="refNode" ${spread(args)}
+      >${renderSlots(args)}</uui-ref-node-package
+    >
+      <button @click=${() => setFocus()}>Set focus</button>
+    `,
+};

From 28c3339effb4155d2a3e4badc8a1b71e73a5e39e Mon Sep 17 00:00:00 2001
From: Jacob Welander Jensen <64834767+Welander1994@users.noreply.github.com>
Date: Wed, 29 Oct 2025 10:48:05 +0100
Subject: [PATCH 2/8] remove unneeded test class

---
 packages/uui-ref-node/lib/uui-ref-node.element.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
index f93f80490..a9f1e1054 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.element.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -233,10 +233,6 @@ export class UUIRefNodeElement extends UUIRefElement {
         }
       }
 
-      .test {
-        border: red 10px;
-      }
-
       :host(:not([disabled])) #open-part:hover #icon {
         color: var(--uui-color-interactive-emphasis);
       }

From e3bcf617c99c082aa3d4792c8d216b12f60f319c Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 5 Nov 2025 16:20:11 +0000
Subject: [PATCH 3/8] Linting/auto-formatting

---
 .../lib/uui-ref-node-data-type.story.ts       | 55 ++++++-------------
 .../lib/uui-ref-node-document-type.story.ts   | 35 ++----------
 .../lib/uui-ref-node-form.story.ts            | 30 ++--------
 .../lib/uui-ref-node-member.story.ts          | 35 ++----------
 .../lib/uui-ref-node-package.story.ts         | 36 ++----------
 .../lib/uui-ref-node-user.story.ts            | 35 ++----------
 .../uui-ref-node/lib/uui-ref-node.story.ts    | 40 +++-----------
 7 files changed, 54 insertions(+), 212 deletions(-)

diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
index b10944acf..b20e4644e 100644
--- a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
+++ b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
@@ -13,22 +13,16 @@ const meta: Meta = {
   id: 'uui-ref-node-data-type',
   component: 'uui-ref-node-data-type',
   title: 'Displays/References/Data Type',
-  args: {
-    name: 'TextField',
-    alias: 'Umbraco.TextField',
-  },
-  render: args =>
-    html`<uui-ref-node-data-type ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-data-type
-    >`,
+  args: { name: 'TextField', alias: 'Umbraco.TextField' },
+  render: args => html`
+    <uui-ref-node-data-type ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-data-type>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -36,10 +30,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
@@ -48,29 +45,13 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index a45b8a0eb..acaa411b4 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -13,10 +13,7 @@ const meta: Meta = {
   id: 'uui-ref-node-document-type',
   component: 'uui-ref-node-document-type',
   title: 'Displays/References/Document Type',
-  args: {
-    name: 'Product Page',
-    alias: 'productPage',
-  },
+  args: { name: 'Product Page', alias: 'productPage' },
   render: args =>
     html`<uui-ref-node-document-type
       id="refNode"
@@ -28,11 +25,7 @@ const meta: Meta = {
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -52,29 +45,13 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index dd6bb4089..2ed363c02 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -24,11 +24,7 @@ const meta: Meta = {
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -48,29 +44,13 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index 332edb908..a27548d28 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -13,10 +13,7 @@ const meta: Meta = {
   id: 'uui-ref-node-member',
   component: 'uui-ref-node-member',
   title: 'Displays/References/Member',
-  args: {
-    name: 'Arnold Vitz',
-    groupName: 'Visitor, Registered-Member',
-  },
+  args: { name: 'Arnold Vitz', groupName: 'Visitor, Registered-Member' },
   render: args =>
     html`<uui-ref-node-member ${spread(args)}
       >${renderSlots(args)}</uui-ref-node-member
@@ -24,11 +21,7 @@ const meta: Meta = {
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -48,29 +41,13 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index e524bc4ee..45a8cad7d 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -13,11 +13,7 @@ const meta: Meta = {
   id: 'uui-ref-node-package',
   component: 'uui-ref-node-package',
   title: 'Displays/References/Package',
-  args: {
-    name: 'Umbraco Starter Kit',
-    version: '1.1',
-    author: 'Umbraco HQ',
-  },
+  args: { name: 'Umbraco Starter Kit', version: '1.1', author: 'Umbraco HQ' },
   render: args =>
     html`<uui-ref-node-package ${spread(args)}
       >${renderSlots(args)}</uui-ref-node-package
@@ -25,11 +21,7 @@ const meta: Meta = {
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -49,29 +41,13 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index fbe54dfc5..643a2206a 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -13,10 +13,7 @@ const meta: Meta = {
   id: 'uui-ref-node-user',
   component: 'uui-ref-node-user',
   title: 'Displays/References/User',
-  args: {
-    name: 'Arnold Edits',
-    groupName: 'Editor, Translator',
-  },
+  args: { name: 'Arnold Edits', groupName: 'Editor, Translator' },
   render: args =>
     html`<uui-ref-node-user ${spread(args)}
       >${renderSlots(args)}</uui-ref-node-user
@@ -24,11 +21,7 @@ const meta: Meta = {
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -48,29 +41,13 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index 0c43bcc65..dc3f3c617 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -19,20 +19,13 @@ const meta: Meta = {
   id: 'uui-ref-node',
   component: 'uui-ref-node',
   title: 'Displays/References/Node',
-  args: {
-    name: 'Rabbit Suit Product Page',
-    detail: 'path/to/nowhere',
-  },
+  args: { name: 'Rabbit Suit Product Page', detail: 'path/to/nowhere' },
   render: args =>
     html`<uui-ref-node ${spread(args)}>${renderSlots(args)}</uui-ref-node>`,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
-  parameters: {
-    readme: {
-      markdown: readme,
-    },
-  },
+  parameters: { readme: { markdown: readme } },
 };
 
 export default meta;
@@ -55,36 +48,17 @@ export const CustomIcon: Story = {
   },
 };
 
-export const Standalone: Story = {
-  args: {
-    standalone: true,
-  },
-};
+export const Standalone: Story = { args: { standalone: true } };
 
 export const Href: Story = {
-  args: {
-    href: 'https://umbraco.com',
-    target: '_blank',
-  },
+  args: { href: 'https://umbraco.com', target: '_blank' },
 };
 
-export const Selectable: Story = {
-  args: {
-    selectable: true,
-  },
-};
+export const Selectable: Story = { args: { selectable: true } };
 
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
+export const Disabled: Story = { args: { disabled: true } };
 
-export const Readonly: Story = {
-  args: {
-    readonly: true,
-  },
-};
+export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
   render: args =>

From 44d2cd9ba94f7bd2334ea83635c9dd54a82f3179 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 5 Nov 2025 16:26:18 +0000
Subject: [PATCH 4/8] Simplified the `setFocus` function

(removed typescript errors)
---
 .../lib/uui-ref-node-data-type.story.ts                       | 3 +--
 .../lib/uui-ref-node-document-type.story.ts                   | 3 +--
 packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts     | 3 +--
 packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts | 3 +--
 .../uui-ref-node-package/lib/uui-ref-node-package.story.ts    | 3 +--
 packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts     | 3 +--
 packages/uui-ref-node/lib/uui-ref-node.story.ts               | 4 +---
 7 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
index b20e4644e..6dcf2bda5 100644
--- a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
+++ b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index acaa411b4..d9fee7676 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index 2ed363c02..9e6253515 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index a27548d28..5d55eefc7 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index 45a8cad7d..7d06569d2 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index 643a2206a..1cfdab3f7 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index dc3f3c617..96cc2b9ca 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -10,9 +10,7 @@ import '@umbraco-ui/uui-button/lib';
 import '@umbraco-ui/uui-icon/lib';
 
 const setFocus = () => {
-  const refElement = document.querySelectorAll('#refNode');
-  console.log(refElement[0]);
-  refElement[0].focus();
+  document.getElementById('refNode')?.focus();
 };
 
 const meta: Meta = {

From 7dc54c8cbecd1f1c12d25af19149947597696249 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 5 Nov 2025 16:39:11 +0000
Subject: [PATCH 5/8] Corrected markup for the `Focus` story

---
 .../lib/uui-ref-node-data-type.story.ts              | 11 ++++++-----
 .../lib/uui-ref-node-document-type.story.ts          | 11 ++++++-----
 .../uui-ref-node-form/lib/uui-ref-node-form.story.ts | 11 ++++++-----
 .../lib/uui-ref-node-member.story.ts                 | 12 ++++++------
 .../lib/uui-ref-node-package.story.ts                | 11 ++++++-----
 .../uui-ref-node-user/lib/uui-ref-node-user.story.ts | 12 ++++++------
 packages/uui-ref-node/lib/uui-ref-node.story.ts      | 12 ++++++------
 7 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
index 6dcf2bda5..6c83f7be0 100644
--- a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
+++ b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
@@ -53,9 +53,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
-        >${renderSlots(args)}</uui-ref-node-document-type
-      >
-      <button @click=${() => setFocus()}>Set focus</button> `,
+  render: args => html`
+    <uui-ref-node-data-type id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-data-type>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index d9fee7676..584cf2073 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -53,9 +53,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
-        >${renderSlots(args)}</uui-ref-node-document-type
-      >
-      <button @click=${() => setFocus()}>Set focus</button> `,
+  render: args => html`
+    <uui-ref-node-document-type id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-document-type>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index 9e6253515..246cf9ce9 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -52,9 +52,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node-document-type id="refNode" ${spread(args)}
-        >${renderSlots(args)}</uui-ref-node-document-type
-      >
-      <button @click=${() => setFocus()}>Set focus</button> `,
+  render: args => html`
+    <uui-ref-node-form id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-form>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index 5d55eefc7..e54f77b9b 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -49,10 +49,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node-member id="refNode" ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-document-type
-    >
-      <button @click=${() => setFocus()}>Set focus</button>
-    `,
+  render: args => html`
+    <uui-ref-node-member id="refNode" ${spread(args)}
+      >${renderSlots(args)}
+    </uui-ref-node-member>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index 7d06569d2..b9678be0c 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -49,9 +49,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node-package id="refNode" ${spread(args)}
-        >${renderSlots(args)}</uui-ref-node-package
-      >
-      <button @click=${() => setFocus()}>Set focus</button> `,
+  render: args => html`
+    <uui-ref-node-package id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-package>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index 1cfdab3f7..40df1b279 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -49,10 +49,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node-user id="refNode" ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-package
-    >
-      <button @click=${() => setFocus()}>Set focus</button>
-    `,
+  render: args => html`
+    <uui-ref-node-user id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-user>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index 96cc2b9ca..f55afbe4a 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -59,10 +59,10 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args =>
-    html`<uui-ref-node id="refNode" ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-package
-    >
-      <button @click=${() => setFocus()}>Set focus</button>
-    `,
+  render: args => html`
+    <uui-ref-node id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node>
+    <button @click=${() => setFocus()}>Set focus</button>
+  `,
 };

From e755fdc7886f054b0b2c1265928569ca7cff0ca1 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 5 Nov 2025 16:39:45 +0000
Subject: [PATCH 6/8] Code/markup formatting

---
 .../lib/uui-ref-node-document-type.story.ts   | 23 ++++++++++---------
 .../lib/uui-ref-node-form.story.ts            | 19 ++++++++-------
 .../lib/uui-ref-node-member.story.ts          | 11 +++++----
 .../lib/uui-ref-node-package.story.ts         | 20 +++++++++-------
 .../lib/uui-ref-node-user.story.ts            | 20 +++++++++-------
 .../uui-ref-node/lib/uui-ref-node.story.ts    | 17 ++++++++------
 6 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index 584cf2073..16af6b0b5 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -13,13 +13,11 @@ const meta: Meta = {
   component: 'uui-ref-node-document-type',
   title: 'Displays/References/Document Type',
   args: { name: 'Product Page', alias: 'productPage' },
-  render: args =>
-    html`<uui-ref-node-document-type
-      id="refNode"
-      ${spread(args)}
-      @open=${() => onOpen()}
-      >${renderSlots(args)}</uui-ref-node-document-type
-    > `,
+  render: args => html`
+    <uui-ref-node-document-type id="refNode" ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-document-type>
+  `,
 
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
@@ -32,10 +30,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index 246cf9ce9..47e7ec916 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -16,10 +16,11 @@ const meta: Meta = {
     name: 'Newsletter Signup',
     detail: 'Accept and signup for newsletter',
   },
-  render: args =>
-    html`<uui-ref-node-form ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-form
-    >`,
+  render: args => html`
+    <uui-ref-node-form ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-form>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
@@ -31,10 +32,12 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete"
+          ><uui-icon name="delete"></uui-icon> </uui-button
+      ></uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index e54f77b9b..d7db51caf 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -28,10 +28,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index b9678be0c..283b49e02 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -13,10 +13,11 @@ const meta: Meta = {
   component: 'uui-ref-node-package',
   title: 'Displays/References/Package',
   args: { name: 'Umbraco Starter Kit', version: '1.1', author: 'Umbraco HQ' },
-  render: args =>
-    html`<uui-ref-node-package ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-package
-    >`,
+  render: args => html`
+    <uui-ref-node-package ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-package>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
@@ -28,10 +29,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index 40df1b279..f0f5fe094 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -13,10 +13,11 @@ const meta: Meta = {
   component: 'uui-ref-node-user',
   title: 'Displays/References/User',
   args: { name: 'Arnold Edits', groupName: 'Editor, Translator' },
-  render: args =>
-    html`<uui-ref-node-user ${spread(args)}
-      >${renderSlots(args)}</uui-ref-node-user
-    >`,
+  render: args => html`
+    <uui-ref-node-user ${spread(args)}>
+      ${renderSlots(args)}
+    </uui-ref-node-user>
+  `,
   decorators: [
     (Story: any) => html`<div style="max-width: 420px;">${Story()}</div>`,
   ],
@@ -28,10 +29,13 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index f55afbe4a..227973658 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -31,13 +31,16 @@ type Story = StoryObj;
 
 export const Default: Story = {
   args: {
-    'tag slot': html`<uui-tag size="s" slot="tag" color="positive"
-      >Published</uui-tag
-    >`,
-    'actions slot': html`<uui-action-bar slot="actions"
-      ><uui-button label="delete"
-        ><uui-icon name="delete"></uui-icon></uui-button
-    ></uui-action-bar>`,
+    'tag slot': html`
+      <uui-tag size="s" slot="tag" color="positive">Published</uui-tag>
+    `,
+    'actions slot': html`
+      <uui-action-bar slot="actions">
+        <uui-button label="delete">
+          <uui-icon name="delete"></uui-icon>
+        </uui-button>
+      </uui-action-bar>
+    `,
   },
 };
 export const CustomIcon: Story = {

From ac621622638cb705c54a5c79ecba82fb714d37b7 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 5 Nov 2025 16:46:33 +0000
Subject: [PATCH 7/8] Simplified the `Focus` story to reuse the default
 story/markup

(this will prevent any accidental markup typos)
---
 .../lib/uui-ref-node-data-type.story.ts       | 21 +++++++++---------
 .../lib/uui-ref-node-document-type.story.ts   | 21 +++++++++---------
 .../lib/uui-ref-node-form.story.ts            | 21 +++++++++---------
 .../lib/uui-ref-node-member.story.ts          | 21 +++++++++---------
 .../lib/uui-ref-node-package.story.ts         | 22 +++++++++----------
 .../lib/uui-ref-node-user.story.ts            | 21 +++++++++---------
 .../uui-ref-node/lib/uui-ref-node.story.ts    | 21 +++++++++---------
 7 files changed, 77 insertions(+), 71 deletions(-)

diff --git a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
index 6c83f7be0..ae714de96 100644
--- a/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
+++ b/packages/uui-ref-node-data-type/lib/uui-ref-node-data-type.story.ts
@@ -4,10 +4,6 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node-data-type',
   component: 'uui-ref-node-data-type',
@@ -53,10 +49,15 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node-data-type id="refNode" ${spread(args)}>
-      ${renderSlots(args)}
-    </uui-ref-node-data-type>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
index 16af6b0b5..95d77b7d9 100644
--- a/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
+++ b/packages/uui-ref-node-document-type/lib/uui-ref-node-document-type.story.ts
@@ -4,10 +4,6 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node-document-type',
   component: 'uui-ref-node-document-type',
@@ -54,10 +50,15 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node-document-type id="refNode" ${spread(args)}>
-      ${renderSlots(args)}
-    </uui-ref-node-document-type>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
index 47e7ec916..ee1559502 100644
--- a/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
+++ b/packages/uui-ref-node-form/lib/uui-ref-node-form.story.ts
@@ -4,10 +4,6 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node-form',
   component: 'uui-ref-node-form',
@@ -55,10 +51,15 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node-form id="refNode" ${spread(args)}>
-      ${renderSlots(args)}
-    </uui-ref-node-form>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
index d7db51caf..243066814 100644
--- a/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
+++ b/packages/uui-ref-node-member/lib/uui-ref-node-member.story.ts
@@ -4,10 +4,6 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node-member',
   component: 'uui-ref-node-member',
@@ -52,10 +48,15 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node-member id="refNode" ${spread(args)}
-      >${renderSlots(args)}
-    </uui-ref-node-member>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
index 283b49e02..27b7322ea 100644
--- a/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
+++ b/packages/uui-ref-node-package/lib/uui-ref-node-package.story.ts
@@ -4,10 +4,6 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node-package',
   component: 'uui-ref-node-package',
@@ -51,12 +47,16 @@ export const Selectable: Story = { args: { selectable: true } };
 export const Disabled: Story = { args: { disabled: true } };
 
 export const Readonly: Story = { args: { readonly: true } };
-
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node-package id="refNode" ${spread(args)}>
-      ${renderSlots(args)}
-    </uui-ref-node-package>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
index f0f5fe094..98323f391 100644
--- a/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
+++ b/packages/uui-ref-node-user/lib/uui-ref-node-user.story.ts
@@ -4,10 +4,6 @@ import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { renderSlots, spread } from '../../../storyhelpers';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node-user',
   component: 'uui-ref-node-user',
@@ -53,10 +49,15 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node-user id="refNode" ${spread(args)}>
-      ${renderSlots(args)}
-    </uui-ref-node-user>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };
diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts
index 227973658..544d79379 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.story.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.story.ts
@@ -9,10 +9,6 @@ import '@umbraco-ui/uui-action-bar/lib';
 import '@umbraco-ui/uui-button/lib';
 import '@umbraco-ui/uui-icon/lib';
 
-const setFocus = () => {
-  document.getElementById('refNode')?.focus();
-};
-
 const meta: Meta = {
   id: 'uui-ref-node',
   component: 'uui-ref-node',
@@ -62,10 +58,15 @@ export const Disabled: Story = { args: { disabled: true } };
 export const Readonly: Story = { args: { readonly: true } };
 
 export const Focus: Story = {
-  render: args => html`
-    <uui-ref-node id="refNode" ${spread(args)}>
-      ${renderSlots(args)}
-    </uui-ref-node>
-    <button @click=${() => setFocus()}>Set focus</button>
-  `,
+  args: { id: 'refNode' },
+  decorators: [
+    (Story: any) => html`
+      <div style="max-width: 420px;">
+        ${Story()}
+        <button @click=${() => document.getElementById('refNode')?.focus()}>
+          Set focus
+        </button>
+      </div>
+    `,
+  ],
 };

From 2e5cbe00c2725d3ba1f64b87c068b9b220237296 Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Wed, 5 Nov 2025 16:49:01 +0000
Subject: [PATCH 8/8] Refactored `uui-ref-node` to query "#open-part" to a
 getter

---
 packages/uui-ref-node/lib/uui-ref-node.element.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts
index a9f1e1054..05fb752f9 100644
--- a/packages/uui-ref-node/lib/uui-ref-node.element.ts
+++ b/packages/uui-ref-node/lib/uui-ref-node.element.ts
@@ -3,7 +3,7 @@ import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
 import { css, html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 
 /**
  *  @element uui-ref-node
@@ -64,6 +64,9 @@ export class UUIRefNodeElement extends UUIRefElement {
   @property({ type: String })
   public rel?: string;
 
+  @query('#open-part')
+  protected _openPart?: HTMLInputElement;
+
   @state()
   private _iconSlotHasContent = false;
 
@@ -86,6 +89,11 @@ export class UUIRefNodeElement extends UUIRefElement {
     demandCustomElement(this, 'uui-icon');
   }
 
+  async focus() {
+    await this.updateComplete;
+    this._openPart?.focus();
+  }
+
   #onSlotIconChange(event: Event) {
     this._iconSlotHasContent =
       (event.target as HTMLSlotElement).assignedNodes({ flatten: true })
@@ -163,11 +171,6 @@ export class UUIRefNodeElement extends UUIRefElement {
     `;
   }
 
-  public focus() {
-    const openPart = this.renderRoot.querySelector('#open-part') as HTMLElement;
-    openPart?.focus();
-  }
-
   #renderOpenPart() {
     if (this.readonly) {
       return html`${this.#renderContent()}`;