diff --git a/beam/src/components/BeamDayDivider.vue b/beam/src/components/BeamDayDivider.vue
index e1414528..b9efe471 100644
--- a/beam/src/components/BeamDayDivider.vue
+++ b/beam/src/components/BeamDayDivider.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 
 import type { ListViewItem } from '../types'
 
diff --git a/beam/src/components/BeamFilter.vue b/beam/src/components/BeamFilter.vue
index 89783639..f807182f 100644
--- a/beam/src/components/BeamFilter.vue
+++ b/beam/src/components/BeamFilter.vue
@@ -2,12 +2,11 @@
 	<div ref="beam-filters" class="beam_filters" :style="{ height: isOpen ? '100%' : headerHeight }">
 		<div ref="beam-filters-header" @click="toggle" class="beam_filters-heading">
 			<ToggleArrow :open="isOpen" />
-			<BeamHeading> Filter </BeamHeading>
+			<BeamHeading>Filter</BeamHeading>
 		</div>
+
 		<div class="beam_filters-options">
-			<slot>
-				<p>OPTIONS GO HERE</p>
-			</slot>
+			<slot></slot>
 		</div>
 	</div>
 </template>
@@ -15,6 +14,8 @@
 <script setup lang="ts">
 import { ref, onMounted, useTemplateRef } from 'vue'
 
+defineSlots<{ default(): any }>()
+
 const header = useTemplateRef('beam-filters-header')
 const beamFilters = useTemplateRef('beam-filters')
 
@@ -27,9 +28,11 @@ const toggle = () => {
 }
 
 onMounted(() => {
-	headerHeight.value = getTotalHeight(header.value)
-	totalHeight.value = getTotalHeight(beamFilters.value)
-	beamFilters.value.style.height = headerHeight.value
+	if (header.value && beamFilters.value) {
+		headerHeight.value = getTotalHeight(header.value)
+		totalHeight.value = getTotalHeight(beamFilters.value)
+		beamFilters.value.style.height = headerHeight.value
+	}
 })
 
 const getTotalHeight = (el: HTMLDivElement) => {
diff --git a/beam/src/components/BeamFilterOption.vue b/beam/src/components/BeamFilterOption.vue
index 506f9881..50fbd4e1 100644
--- a/beam/src/components/BeamFilterOption.vue
+++ b/beam/src/components/BeamFilterOption.vue
@@ -1,25 +1,26 @@
 <template>
 	<BeamHeading class="beam_filter-option-heading">{{ title }}</BeamHeading>
-	<div @click="toggle" class="beam_filter-option">
-		<div ref="select" class="beam_filter-option-select">
+	<div @click="open = !open" class="beam_filter-option">
+		<div class="beam_filter-option-select">
 			<div class="beam_filter-arrow">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.36 70.71">
 					<polygon points="0 70.71 0 0 35.36 35.36 0 70.71" />
 				</svg>
 			</div>
 			<div class="beam_filter-label">
-				<label>{{ choice }}</label>
+				<label>{{ label }}</label>
 			</div>
 		</div>
+
 		<ul ref="menu" v-if="open" class="beam_filter-select-menu">
 			<li
-				v-for="(opt, index) in choices"
-				:class="{ selected: choice == opt.choice }"
-				:data-value="opt.value"
-				:key="index"
+				v-for="choice in choices"
+				:class="{ selected: label == choice.label }"
+				:data-value="choice.value"
+				:key="choice.value"
 				class="beam_filter-select-option"
-				@click="updateValue(opt)">
-				{{ opt.choice }}
+				@click="selectChoice(choice)">
+				{{ choice.label }}
 			</li>
 		</ul>
 	</div>
@@ -28,27 +29,25 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-type Choice = {
-	choice: string
-	value: string
-}
+import { BeamFilterChoice } from '../types'
+
+const emit = defineEmits<{
+	select: [choice: BeamFilterChoice]
+}>()
 
 const { title = 'title', choices = [] } = defineProps<{
-	choices: Choice[]
+	choices: BeamFilterChoice[]
 	title?: string
 }>()
 
 const open = ref(false)
+const label = ref(choices[0].label)
 const value = ref(choices[0].value)
-const choice = ref(choices[0].choice)
 
-const updateValue = (data: Choice) => {
-	choice.value = data.choice
+const selectChoice = (data: BeamFilterChoice) => {
+	label.value = data.label
 	value.value = data.value
-}
-
-const toggle = () => {
-	open.value = !open.value
+	emit('select', data)
 }
 </script>
 
diff --git a/beam/src/components/ListView.vue b/beam/src/components/ListView.vue
index cbf150a6..44d87c67 100644
--- a/beam/src/components/ListView.vue
+++ b/beam/src/components/ListView.vue
@@ -1,6 +1,6 @@
 <template>
 	<ul class="beam_list-view">
-		<li v-for="item in items" :key="item.label">
+		<li v-for="item in items" :key="item.barcode || item.label">
 			<template v-if="item.linkComponent == 'BeamDayDivider'">
 				<BeamDayDivider :item="item"></BeamDayDivider>
 			</template>
diff --git a/beam/src/components/SegmentedDisplay.vue b/beam/src/components/SegmentedDisplay.vue
index 19b39651..641ddc6b 100644
--- a/beam/src/components/SegmentedDisplay.vue
+++ b/beam/src/components/SegmentedDisplay.vue
@@ -3,8 +3,11 @@
 		<h1 class="segmented-display-output" :style="{ color: getColor(textColor) }">{{ getOutput }}</h1>
 	</div>
 </template>
+
 <script setup lang="ts">
-import { ref, defineProps, computed } from 'vue'
+import { computed } from 'vue'
+
+import { BeamColor } from '../types'
 
 const {
 	displayInput = 120.2568,
@@ -14,16 +17,16 @@ const {
 } = defineProps<{
 	displayInput?: number
 	decimalPlaces?: number
-	displayColor?: Color
-	textColor?: Color
+	displayColor?: BeamColor
+	textColor?: BeamColor
 }>()
 
 const getOutput = computed(() => {
-	if (displayInput.length == 0) return Number(0).toFixed(decimalPlaces)
+	if (displayInput === 0) return Number(0).toFixed(decimalPlaces)
 	return displayInput.toFixed(decimalPlaces)
 })
 
-const getColor = color => {
+const getColor = (color: BeamColor) => {
 	return color.substr(0, 2) == '--' ? `var(${color})` : color
 }
 </script>
diff --git a/beam/src/composables/mqtt.ts b/beam/src/composables/mqtt.ts
index 03026b29..a560dfdd 100644
--- a/beam/src/composables/mqtt.ts
+++ b/beam/src/composables/mqtt.ts
@@ -9,7 +9,14 @@ import { IMqttStream } from '../types'
  * @returns MQTT stream messages
  * @beta
  */
-export const useMqttStream = (options: IMqttStream) => {
+export const useMqttStream = async (options: IMqttStream) => {
+	if (options.host && options.port) {
+		const portActive = await isPortActive(options.host, options.port)
+		if (!portActive) {
+			return
+		}
+	}
+
 	const client = ref<MqttClient>()
 	const messages = ref<Record<string, string[]>>({})
 
@@ -43,3 +50,52 @@ export const useMqttStream = (options: IMqttStream) => {
 
 	return { messages }
 }
+
+/**
+ * Check if a local port has a service running
+ * @param host the host to check
+ * @param port the port to check
+ * @returns true if the port has a service running, false otherwise
+ *
+ * @beta
+ */
+export const isPortActive = async (host: string, port: number) => {
+	try {
+		const controller = new AbortController()
+		// Set a timeout of 2 seconds
+		const timeoutId = setTimeout(() => controller.abort(), 2000)
+
+		try {
+			await fetch(`${host}:${port}`, {
+				mode: 'no-cors', // This allows checking without CORS issues
+				signal: controller.signal,
+			})
+
+			clearTimeout(timeoutId)
+			// If we get any response, the port is in use
+			return true
+		} catch (error) {
+			clearTimeout(timeoutId)
+			if (error instanceof DOMException && error.name === 'AbortError') {
+				// Timeout - port is probably not in use
+				return false
+			}
+
+			// For connection refused errors, we need to check the error message
+			// as different browsers handle this differently
+			const errorString = String(error)
+			if (
+				errorString.includes('NetworkError') ||
+				errorString.includes('Failed to fetch') ||
+				errorString.includes('net::ERR_CONNECTION_REFUSED')
+			) {
+				return false
+			}
+
+			// If we get here, there might be something running on the port
+			return true
+		}
+	} catch (error) {
+		return false
+	}
+}
diff --git a/beam/src/index.ts b/beam/src/index.ts
index b46ceaab..b74f9a0e 100644
--- a/beam/src/index.ts
+++ b/beam/src/index.ts
@@ -24,7 +24,7 @@ import SegmentedDisplay from './components/SegmentedDisplay.vue'
 import SplitColumn from './components/SplitColumn.vue'
 import ToggleArrow from './components/ToggleArrow.vue'
 import { useMqttStream } from './composables/mqtt'
-export type { IMqttStream, ListViewItem } from './types'
+export type * from './types'
 import '../themes/beam.css'
 
 /**
diff --git a/beam/src/types/index.ts b/beam/src/types/index.ts
index c7cd97b0..bc28169f 100644
--- a/beam/src/types/index.ts
+++ b/beam/src/types/index.ts
@@ -1,32 +1,70 @@
 import type { IClientOptions } from 'mqtt'
 
 /**
- * @beta
+ * @public
  */
 export type ListViewItem = {
-	description: string
-	label: string
-
+	barcode?: string
 	checked?: boolean
 	count?: {
 		count: number
 		of: number
-		uom: string
+		uom?: string
 	}
 	date?: string
 	dateFormat?: string
 	debounce?: number
+	description?: string
+	label?: string
 	linkComponent?: string
 	route?: string
 }
 
-type RGB = `rgb(${number}, ${number}, ${number})`
-type HSL = `hsl(${number}, ${number}%, ${number}%)`
-type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
-type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
-type HEX = `#${string}`
+// TODO: the `string` at the end should be replaced by `DataType.Color`
+// in the `csstype` lib but import seems to be missing
+/**
+ * @public
+ */
+export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | string
+
+/**
+ * @public
+ */
+export type BeamFilterChoice = {
+	label: string
+	value: string
+}
+
+/**
+ * RGB color string representation
+ * @public
+ */
+export type RGB = `rgb(${number}, ${number}, ${number})`
+
+/**
+ * RGBA color string representation
+ * @public
+ */
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
+
+/**
+ * HSL color string representation
+ * @public
+ */
+export type HSL = `hsl(${number}, ${number}%, ${number}%)`
+
+/**
+ * HSLA color string representation
+ * @public
+ */
+export type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
+
+/**
+ * HEX color string representation
+ * @public
+ */
+export type HEX = `#${string}`
 
-export type Color = RGB | RGBA | HEX | HSL | HSLA | string
 /**
  * MQTT stream options
  * @public
diff --git a/common/reviews/api/beam.api.md b/common/reviews/api/beam.api.md
index fab283ee..77498fa2 100644
--- a/common/reviews/api/beam.api.md
+++ b/common/reviews/api/beam.api.md
@@ -37,10 +37,19 @@ export { BeamArrow }
 
 export { BeamBtn }
 
+// @public (undocumented)
+export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | string;
+
 export { BeamDayDivider }
 
 export { BeamFilter }
 
+// @public (undocumented)
+export type BeamFilterChoice = {
+    label: string;
+    value: string;
+};
+
 export { BeamFilterOption }
 
 export { BeamHeading }
@@ -57,6 +66,15 @@ export { Confirm }
 
 export { FixedTop }
 
+// @public
+export type HEX = `#${string}`;
+
+// @public
+export type HSL = `hsl(${number}, ${number}%, ${number}%)`;
+
+// @public
+export type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`;
+
 // @public
 export interface IMqttStream extends IClientOptions {
     // (undocumented)
@@ -76,25 +94,32 @@ export { ListItem }
 
 export { ListView }
 
-// @beta (undocumented)
+// @public (undocumented)
 export type ListViewItem = {
-    description: string;
-    label: string;
+    barcode?: string;
     checked?: boolean;
     count?: {
         count: number;
         of: number;
-        uom: string;
+        uom?: string;
     };
     date?: string;
     dateFormat?: string;
     debounce?: number;
+    description?: string;
+    label?: string;
     linkComponent?: string;
     route?: string;
 };
 
 export { Navbar }
 
+// @public
+export type RGB = `rgb(${number}, ${number}, ${number})`;
+
+// @public
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+
 export { ScanInput }
 
 export { SegmentedDisplay }
@@ -104,9 +129,9 @@ export { SplitColumn }
 export { ToggleArrow }
 
 // @beta
-export const useMqttStream: (options: IMqttStream) => {
+export const useMqttStream: (options: IMqttStream) => Promise<{
     messages: Ref<Record<string, string[]>, Record<string, string[]>>;
-};
+} | undefined>;
 
 // (No @packageDocumentation comment for this package)
 
diff --git a/docs/beam/beam.beamcolor.md b/docs/beam/beam.beamcolor.md
new file mode 100644
index 00000000..e8b1e548
--- /dev/null
+++ b/docs/beam/beam.beamcolor.md
@@ -0,0 +1,14 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [BeamColor](./beam.beamcolor.md)
+
+## BeamColor type
+
+
+**Signature:**
+
+```typescript
+export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | string;
+```
+**References:** [RGB](./beam.rgb.md)<!-- -->, [RGBA](./beam.rgba.md)<!-- -->, [HEX](./beam.hex.md)<!-- -->, [HSL](./beam.hsl.md)<!-- -->, [HSLA](./beam.hsla.md)
+
diff --git a/docs/beam/beam.beamfilterchoice.md b/docs/beam/beam.beamfilterchoice.md
new file mode 100644
index 00000000..539ad12d
--- /dev/null
+++ b/docs/beam/beam.beamfilterchoice.md
@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [BeamFilterChoice](./beam.beamfilterchoice.md)
+
+## BeamFilterChoice type
+
+
+**Signature:**
+
+```typescript
+export type BeamFilterChoice = {
+    label: string;
+    value: string;
+};
+```
diff --git a/docs/beam/beam.hex.md b/docs/beam/beam.hex.md
new file mode 100644
index 00000000..43a3a2b9
--- /dev/null
+++ b/docs/beam/beam.hex.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [HEX](./beam.hex.md)
+
+## HEX type
+
+HEX color string representation
+
+**Signature:**
+
+```typescript
+export type HEX = `#${string}`;
+```
diff --git a/docs/beam/beam.hsl.md b/docs/beam/beam.hsl.md
new file mode 100644
index 00000000..aeae50cc
--- /dev/null
+++ b/docs/beam/beam.hsl.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [HSL](./beam.hsl.md)
+
+## HSL type
+
+HSL color string representation
+
+**Signature:**
+
+```typescript
+export type HSL = `hsl(${number}, ${number}%, ${number}%)`;
+```
diff --git a/docs/beam/beam.hsla.md b/docs/beam/beam.hsla.md
new file mode 100644
index 00000000..11026bcc
--- /dev/null
+++ b/docs/beam/beam.hsla.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [HSLA](./beam.hsla.md)
+
+## HSLA type
+
+HSLA color string representation
+
+**Signature:**
+
+```typescript
+export type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`;
+```
diff --git a/docs/beam/beam.listviewitem.md b/docs/beam/beam.listviewitem.md
index 964252b9..a4b9f026 100644
--- a/docs/beam/beam.listviewitem.md
+++ b/docs/beam/beam.listviewitem.md
@@ -4,25 +4,23 @@
 
 ## ListViewItem type
 
-> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
-> 
-
 
 **Signature:**
 
 ```typescript
 export type ListViewItem = {
-    description: string;
-    label: string;
+    barcode?: string;
     checked?: boolean;
     count?: {
         count: number;
         of: number;
-        uom: string;
+        uom?: string;
     };
     date?: string;
     dateFormat?: string;
     debounce?: number;
+    description?: string;
+    label?: string;
     linkComponent?: string;
     route?: string;
 };
diff --git a/docs/beam/beam.md b/docs/beam/beam.md
index 3a7eaa62..dd394bfb 100644
--- a/docs/beam/beam.md
+++ b/docs/beam/beam.md
@@ -82,12 +82,86 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[BeamColor](./beam.beamcolor.md)
+
+
+</td><td>
+
+
+
+</td></tr>
+<tr><td>
+
+[BeamFilterChoice](./beam.beamfilterchoice.md)
+
+
+</td><td>
+
+
+
+</td></tr>
+<tr><td>
+
+[HEX](./beam.hex.md)
+
+
+</td><td>
+
+HEX color string representation
+
+
+</td></tr>
+<tr><td>
+
+[HSL](./beam.hsl.md)
+
+
+</td><td>
+
+HSL color string representation
+
+
+</td></tr>
+<tr><td>
+
+[HSLA](./beam.hsla.md)
+
+
+</td><td>
+
+HSLA color string representation
+
+
+</td></tr>
+<tr><td>
+
 [ListViewItem](./beam.listviewitem.md)
 
 
 </td><td>
 
-**_(BETA)_**
+
+
+</td></tr>
+<tr><td>
+
+[RGB](./beam.rgb.md)
+
+
+</td><td>
+
+RGB color string representation
+
+
+</td></tr>
+<tr><td>
+
+[RGBA](./beam.rgba.md)
+
+
+</td><td>
+
+RGBA color string representation
 
 
 </td></tr>
diff --git a/docs/beam/beam.rgb.md b/docs/beam/beam.rgb.md
new file mode 100644
index 00000000..560287e9
--- /dev/null
+++ b/docs/beam/beam.rgb.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [RGB](./beam.rgb.md)
+
+## RGB type
+
+RGB color string representation
+
+**Signature:**
+
+```typescript
+export type RGB = `rgb(${number}, ${number}, ${number})`;
+```
diff --git a/docs/beam/beam.rgba.md b/docs/beam/beam.rgba.md
new file mode 100644
index 00000000..549da792
--- /dev/null
+++ b/docs/beam/beam.rgba.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@stonecrop/beam](./beam.md) &gt; [RGBA](./beam.rgba.md)
+
+## RGBA type
+
+RGBA color string representation
+
+**Signature:**
+
+```typescript
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+```
diff --git a/docs/beam/beam.usemqttstream.md b/docs/beam/beam.usemqttstream.md
index b3ca6987..724509e7 100644
--- a/docs/beam/beam.usemqttstream.md
+++ b/docs/beam/beam.usemqttstream.md
@@ -12,9 +12,9 @@ Use MQTT stream
 **Signature:**
 
 ```typescript
-useMqttStream: (options: IMqttStream) => {
+useMqttStream: (options: IMqttStream) => Promise<{
     messages: import("vue").Ref<Record<string, string[]>, Record<string, string[]>>;
-}
+} | undefined>
 ```
 
 ## Parameters
@@ -54,7 +54,7 @@ MQTT stream options
 </tbody></table>
 **Returns:**
 
-{ messages: import("vue").Ref&lt;Record&lt;string, string\[\]&gt;, Record&lt;string, string\[\]&gt;&gt;; }
+Promise&lt;{ messages: import("vue").Ref&lt;Record&lt;string, string\[\]&gt;, Record&lt;string, string\[\]&gt;&gt;; } \| undefined&gt;
 
 MQTT stream messages
 
diff --git a/examples/beam/components.story.vue b/examples/beam/components.story.vue
index dae2f478..2fe8419b 100644
--- a/examples/beam/components.story.vue
+++ b/examples/beam/components.story.vue
@@ -90,6 +90,7 @@ import { reactive } from 'vue'
 const workOrder = reactive({
 	complete: false,
 })
+
 const displayOptions = reactive({
 	displayColor: '--sc-segmented-display-background',
 	textColor: '--sc-segmented-display-color',
diff --git a/examples/beam/data/items.json b/examples/beam/data/items.json
index c9cc9e9d..86621b04 100644
--- a/examples/beam/data/items.json
+++ b/examples/beam/data/items.json
@@ -30,84 +30,84 @@
 		"barcode": "5564269659609843627"
 	},
 	{
-		"barcode": "6281478257437327897",
-		"label": "Item 1",
+		"barcode": "6281478257437327898",
+		"label": "Item 5",
 		"description": "iPhone this and that",
 		"count": { "count": 0, "of": 2 },
 		"linkComponent": "ListAnchor",
 		"route": "/item1"
 	},
 	{
-		"barcode": "6281478257437327897",
-		"label": "Item 1 Long Title: Including Subtitle to demonstrate ellipsis",
+		"barcode": "6281478257437327899",
+		"label": "Item 6 Long Title: Including Subtitle to demonstrate ellipsis",
 		"description": "iPhone this and that",
 		"count": { "count": 0, "of": 3 },
 		"linkComponent": "ListAnchor",
 		"route": "/item1"
 	},
 	{
-		"label": "Item 2",
+		"label": "Item 7",
 		"description": "More descriptions of stuff",
 		"count": { "count": 3, "of": 3 },
 		"linkComponent": "ListAnchor",
 		"route": "/item2"
 	},
 	{
-		"label": "Item 3",
+		"label": "Item 8",
 		"description": "",
 		"count": { "count": 1, "of": 6 },
 		"linkComponent": "ListAnchor",
 		"route": "/item3"
 	},
 	{
-		"label": "Item 4",
+		"label": "Item 9",
 		"description": "iPhone this and that plus even more text to demonstrate ellipsis and great savings! on things you can't see or touch",
 		"count": { "count": 0, "of": 3 },
 		"linkComponent": "div",
 		"route": "/item4",
-		"barcode": "5564269659609843627"
+		"barcode": "5564269659609843628"
 	},
 	{
-		"barcode": "6281478257437327897",
-		"label": "Item 1",
+		"barcode": "6281478257437327900",
+		"label": "Item 10",
 		"description": "iPhone this and that",
 		"count": { "count": 0, "of": 2 },
 		"linkComponent": "ListAnchor",
 		"route": "/item1"
 	},
 	{
-		"barcode": "6281478257437327897",
-		"label": "Item 1 Long Title: Including Subtitle to demonstrate ellipsis",
+		"barcode": "6281478257437327901",
+		"label": "Item 11 Long Title: Including Subtitle to demonstrate ellipsis",
 		"description": "iPhone this and that",
 		"count": { "count": 0, "of": 3 },
 		"linkComponent": "ListAnchor",
 		"route": "/item1"
 	},
 	{
-		"label": "Item 2",
+		"label": "Item 12",
 		"description": "More descriptions of stuff",
 		"count": { "count": 3, "of": 3 },
 		"linkComponent": "ListAnchor",
 		"route": "/item2"
 	},
 	{
-		"label": "Item 3",
+		"label": "Item 13",
 		"description": "",
 		"count": { "count": 1, "of": 6 },
 		"linkComponent": "ListAnchor",
 		"route": "/item3"
 	},
 	{
-		"label": "Item 4",
+		"label": "Item 14",
 		"description": "iPhone this and that plus even more text to demonstrate ellipsis and great savings! on things you can't see or touch",
 		"count": { "count": 0, "of": 3 },
 		"linkComponent": "div",
 		"route": "/item4",
-		"barcode": "5564269659609843627"
+		"barcode": "5564269659609843629"
 	},
 	{
-		"barcode": "6281478257437327897",
-		"label": "Item 1",
+		"barcode": "6281478257437327902",
+		"label": "Item 15",
 		"description": "iPhone this and that",
 		"count": { "count": 0, "of": 2 },
 		"linkComponent": "ListAnchor",
diff --git a/examples/beam/default.story.vue b/examples/beam/default.story.vue
index 39ce3822..9a029a8b 100644
--- a/examples/beam/default.story.vue
+++ b/examples/beam/default.story.vue
@@ -118,17 +118,18 @@
 					<BeamFilterOption
 						:title="'Status'"
 						:choices="[
-							{ choice: 'All', value: 'all' },
-							{ choice: 'Complete', value: 'complete' },
-							{ choice: 'Incomplete', value: 'incomplete' },
-						]" />
+							{ label: 'All', value: 'all' },
+							{ label: 'Complete', value: 'complete' },
+							{ label: 'Incomplete', value: 'incomplete' },
+						]"
+						@select="filterItems" />
 					<BeamFilterOption
 						:title="'Delivery Start Date'"
 						:choices="[
-							{ choice: 'All', value: 'all' },
-							{ choice: 'Past', value: 'past' },
-							{ choice: 'Today', value: 'today' },
-							{ choice: 'Future', value: 'future' },
+							{ label: 'All', value: 'all' },
+							{ label: 'Past', value: 'past' },
+							{ label: 'Today', value: 'today' },
+							{ label: 'Future', value: 'future' },
 						]" />
 				</BeamFilter>
 			</FixedTop>
@@ -142,7 +143,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ListViewItem } from '@stonecrop/beam'
+import type { BeamFilterChoice, ListViewItem } from '@stonecrop/beam'
 import { ref, reactive, computed } from 'vue'
 import { type ToastPosition, useToast } from 'vue-toast-notification'
 import 'vue-toast-notification/dist/theme-default.css'
@@ -200,6 +201,7 @@ const incrementItemCount = (barcode: string, qty: number) => {
 	for (const [detectedIndex, rowIndex] of detectedItemsByIndex.entries()) {
 		if (rowIndex) {
 			const count = items.value[rowIndex].count
+			if (!count) continue
 			if (detectedIndex !== detectedItemsByIndex.length - 1) {
 				if (count.count < count.of) {
 					// don't overcount if its not the last row of that barcode
@@ -217,6 +219,16 @@ const incrementItemCount = (barcode: string, qty: number) => {
 	}
 }
 
+const filterItems = (choice: BeamFilterChoice) => {
+	if (choice.value === 'all') {
+		items.value = data
+	} else if (choice.value === 'complete') {
+		items.value = data.filter(item => item.count.count === item.count.of)
+	} else if (choice.value === 'incomplete') {
+		items.value = data.filter(item => item.count.count !== item.count.of)
+	}
+}
+
 const loadMoreItems = () => {
 	if (items.value.length > 40) {
 		// an arbitrary number for this example
@@ -228,39 +240,39 @@ const loadMoreItems = () => {
 		items.value.push(
 			...[
 				{
-					barcode: '6281478257437327897',
-					label: 'Item 1 Long Title: Including Subtitle to demonstrate ellipsis',
+					barcode: '6281478257437327950',
+					label: `Item ${Math.floor(Math.random() * 100)} Long Title: Including Subtitle to demonstrate ellipsis`,
 					description: 'iPhone this and that',
 					count: { count: 0, of: 3 },
 					linkComponent: 'ListAnchor',
 					route: '/item1',
 				},
 				{
-					label: 'Item 2',
+					label: `Item ${Math.floor(Math.random() * 100)}`,
 					description: 'More descriptions of stuff',
 					count: { count: 3, of: 3 },
 					linkComponent: 'ListAnchor',
 					route: '/item2',
 				},
 				{
-					label: 'Item 3',
+					label: `Item ${Math.floor(Math.random() * 100)}`,
 					description: '',
 					count: { count: 1, of: 6 },
 					linkComponent: 'ListAnchor',
 					route: '/item3',
 				},
 				{
-					label: 'Item 4',
+					label: `Item ${Math.floor(Math.random() * 100)}`,
 					description:
 						"iPhone this and that plus even more text to demonstrate ellipsis and great savings! on things you can't see or touch",
 					count: { count: 0, of: 3 },
 					linkComponent: 'div',
 					route: '/item4',
-					barcode: '5564269659609843627',
+					barcode: '5564269659609843650',
 				},
 				{
 					barcode: '6281478257437327897',
-					label: 'Item 1',
+					label: `Item ${Math.floor(Math.random() * 100)}`,
 					description: 'iPhone this and that',
 					count: { count: 0, of: 2 },
 					linkComponent: 'ListAnchor',