+
+ `
+ }
+}
diff --git a/src/components/error-state/index.ts b/src/components/error-state/index.ts
new file mode 100644
index 000000000..d32ed35ab
--- /dev/null
+++ b/src/components/error-state/index.ts
@@ -0,0 +1 @@
+export { default } from './ErrorState'
diff --git a/src/styles/theme.css b/src/styles/theme.css
index f6a312edc..45e213b60 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -12,6 +12,9 @@
--solid-ui-color-tertiary: #083575;
--solid-ui-color-white: #ffffff;
--solid-ui-color-error: #b00020;
+ --solid-ui-color-pink-50: #fff7f8;
+ --solid-ui-color-pink-100: #ffe7eb;
+ --solid-ui-color-pink-200: #f0d8dc;
--solid-ui-color-gray-100: #f3f4f6;
--solid-ui-color-gray-200: #cbd5e1;
@@ -36,6 +39,7 @@
--solid-ui-color-violet-50: #F5F3FF;
--solid-ui-color-red-500: #fb2c36;
+ --solid-ui-color-red-700: #b00020;
--solid-ui-color-body-grey: #666;
diff --git a/src/types/custom-elements.d.ts b/src/types/custom-elements.d.ts
index 71915f251..fde924599 100644
--- a/src/types/custom-elements.d.ts
+++ b/src/types/custom-elements.d.ts
@@ -10,6 +10,7 @@ import type DialogFooter from '../components/dialog-footer/DialogFooter'
import type DialogHeader from '../components/dialog-header/DialogHeader'
import type DialogProvider from '../components/dialog-provider/DialogProvider'
import type DialogsRoot from '../components/dialogs-root/DialogsRoot'
+import type ErrorState from '../components/error-state/ErrorState'
import type Guard from '../components/guard/Guard'
import type Input from '../components/input/Input'
import type LoginButton from '../components/login-button/LoginButton'
@@ -41,6 +42,7 @@ declare global {
'solid-ui-dialog-header': DialogHeader
'solid-ui-dialog-provider': DialogProvider
'solid-ui-dialogs-root': DialogsRoot
+ 'solid-ui-error-state': ErrorState
'solid-ui-guard': Guard
'solid-ui-input': Input
'solid-ui-login-button': LoginButton
diff --git a/test/components/error-state.test.ts b/test/components/error-state.test.ts
new file mode 100644
index 000000000..a5528f6fe
--- /dev/null
+++ b/test/components/error-state.test.ts
@@ -0,0 +1,23 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from 'vitest'
+import '../../src/components/error-state'
+
+describe('solid-ui-error-state', () => {
+ it('renders its title, message, close button, and slotted errors', async () => {
+ const element = document.createElement('solid-ui-error-state')
+ element.setAttribute('title', 'Changes could not be synced')
+ element.setAttribute('message', 'Try again when your connection is restored.')
+ element.innerHTML = '
Network request failed
'
+ document.body.append(element)
+
+ await (element as unknown as { updateComplete: Promise }).updateComplete
+
+ expect(element.shadowRoot?.textContent).toContain('Changes could not be synced')
+ expect(element.shadowRoot?.textContent).toContain('Try again when your connection is restored.')
+ const closeButton = element.shadowRoot?.querySelector('solid-ui-button.close-button')
+ expect(closeButton?.getAttribute('variant')).toBe('ghost')
+ expect(closeButton?.getAttribute('aria-label')).toBe('Close')
+ expect(element.querySelector('li')?.textContent).toBe('Network request failed')
+ })
+})