@kiva/kv-components 1.4.5 → 3.0.1

package/{.eslintrc.js → .eslintrc.cjs}

@@ -4,7 +4,7 @@ module.exports = {
 		node: true,
 	},
 	extends: [
-		'../../.eslintrc',
+		'../../.eslintrc.cjs',
 		'plugin:vue/recommended',
 	],
 	plugins: [

package/CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.0...@kiva/kv-components@3.0.1) (2022-02-16)
+
+
+### Bug Fixes
+
+* **KvButton:** pass through click event for parent ([65c042f](https://github.com/kiva/kv-ui-elements/commit/65c042ff7b4780a514766ab476f443562b195eab))
+
+
+
+
+
+# [3.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@2.0.0...@kiva/kv-components@3.0.0) (2022-02-16)
+
+
+### Bug Fixes
+
+* **deps:** add required missing vue composition api for storybook ([7c4629e](https://github.com/kiva/kv-ui-elements/commit/7c4629eac8820a53ce86de0056a5ac17cfd25b73))
+* input reference was back to ref ([fce5264](https://github.com/kiva/kv-ui-elements/commit/fce52641b384efb83d5d8d5cfd4587cc924b4484))
+* **KvSwitch:** ensure component attributes behave the same way across vue versions ([1414899](https://github.com/kiva/kv-ui-elements/commit/14148990c48449548614d02ee4869ddd72c87f74))
+* model added to work correctly ([8992e83](https://github.com/kiva/kv-ui-elements/commit/8992e8330a86c41e75a42dddc5ed3531aad1da43))
+* set correct module type for importing the package ([ef7e828](https://github.com/kiva/kv-ui-elements/commit/ef7e82876544f9016a09e743d68da3451e1ab3d6))
+* update path ([f33c2fb](https://github.com/kiva/kv-ui-elements/commit/f33c2fb7383ceb2caf916db2ec8d4e940697b5e7))
+* value attr was added to msToDisplayToast computed ref to show the toast correctly ([5c5199c](https://github.com/kiva/kv-ui-elements/commit/5c5199c3d9601f34f9342c971f643c2ed1bde80f))
+
+
+### Features
+
+* checked prop was replaced by modelValue for composition api ([01e31a4](https://github.com/kiva/kv-ui-elements/commit/01e31a41976fc7cb406fbe0c6e41bb2ebf4573b1))
+* files for kvcheckbox component were updated for tests passing ([e788ef3](https://github.com/kiva/kv-ui-elements/commit/e788ef34be213831cfce2034b94c4ebb843d7401))
+* **KvCarousel:** component was rewritten to use composition api ([#149](https://github.com/kiva/kv-ui-elements/issues/149)) ([0e7ab21](https://github.com/kiva/kv-ui-elements/commit/0e7ab219902858fe05626231ca0027498b2d1280))
+* kvcheckbox component was rewritten to use composition api ([945edee](https://github.com/kiva/kv-ui-elements/commit/945edeee9efcec4f47cb4dafbec81d856406cb16))
+* kvcheckbox component was rewritten to use composition api ([787e9cf](https://github.com/kiva/kv-ui-elements/commit/787e9cf9448f7c9db5732fd3e1b2d441c52c389e))
+* kvcontentfulimg component was rewritten to use composition api ([#145](https://github.com/kiva/kv-ui-elements/issues/145)) ([e30526c](https://github.com/kiva/kv-ui-elements/commit/e30526c994e65cfce7d479dd9f06e333588e7360))
+* **KvLightbox:** component was rewritten using composition api ([#156](https://github.com/kiva/kv-ui-elements/issues/156)) ([8a83c6f](https://github.com/kiva/kv-ui-elements/commit/8a83c6ff01b32f2a46c3133c67033051de3ee8cf))
+* kvprogressbar component was rewritten using composition api ([#152](https://github.com/kiva/kv-ui-elements/issues/152)) ([9cda6b6](https://github.com/kiva/kv-ui-elements/commit/9cda6b603a5eff1ea746b58bc1385f54bcb0cb50))
+* **KvRadio:** component was rewritten to use composition api ([#146](https://github.com/kiva/kv-ui-elements/issues/146)) ([5b8f342](https://github.com/kiva/kv-ui-elements/commit/5b8f34213f445e876981197c91e333949ba73eb2))
+* **KvSelect:** component was rewritten and basic test file was added ([#150](https://github.com/kiva/kv-ui-elements/issues/150)) ([69f99d8](https://github.com/kiva/kv-ui-elements/commit/69f99d814e46bdb622c27792fb955261ea7ff7bd))
+* kvswitch component was rewritten using composition api ([a51c00e](https://github.com/kiva/kv-ui-elements/commit/a51c00e67b6f85b83bc24e3672de3d22994b5db1))
+* KvTabs, KvTab, & KvTabPanel updated to support composition api ([#165](https://github.com/kiva/kv-ui-elements/issues/165)) ([c4758ae](https://github.com/kiva/kv-ui-elements/commit/c4758ae7dee98adf4f9a58fad6ef2d87d3fefcf7))
+* **KvTextInput:** component was rewritten using composition api ([#159](https://github.com/kiva/kv-ui-elements/issues/159)) ([6d4ae80](https://github.com/kiva/kv-ui-elements/commit/6d4ae809003b07aea3c6eb97565a09c95289c0e8))
+* kvtextlink component was rewritten to use composition api ([#151](https://github.com/kiva/kv-ui-elements/issues/151)) ([7181775](https://github.com/kiva/kv-ui-elements/commit/7181775d6d30c1bee5955670f615b4fdd587f9fe))
+* pointer was added to switch component ([44ffb45](https://github.com/kiva/kv-ui-elements/commit/44ffb45c6dd5f4c71b5b8bfd3b8b2b65ab0818a2))
+* testing file was added for kvtoast component ([cd6abe9](https://github.com/kiva/kv-ui-elements/commit/cd6abe9dea2218e705fc1efb94127d6b184e3800))
+
+
+### BREAKING CHANGES
+
+* **KvSelect:** The KvSelect prop `value` was renamed to `modelValue`.
+The KvCheckbox prop `checked` has been renamed to `modelValue`.
+The KvCheckbox event `change` has been renamed to `update:modelValue`.
+* **KvTextInput:** The KvTextInput prop `value` has been renamed to `modelValue`
+
+
+
+
+
+# [2.0.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.4.6...@kiva/kv-components@2.0.0) (2022-02-03)
+
+
+* feat!: upgrade Tailwind to v3 ([18c1653](https://github.com/kiva/kv-ui-elements/commit/18c1653565eb42b8abfaaba6b3712173ff341850))
+
+
+### BREAKING CHANGES
+
+* Tailwind dependency is now v3
+
+
+
+
+
+## [1.4.6](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.4.5...@kiva/kv-components@1.4.6) (2022-02-03)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 ## [1.4.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.4.4...@kiva/kv-components@1.4.5) (2022-02-03)
 
 **Note:** Version bump only for package @kiva/kv-components

package/README.md

@@ -7,7 +7,7 @@ A library of accessible UI components that adhere to Kiva's Design System. Curre
 1. [Install tailwind](https://tailwindcss.com/docs/installation) into your project
 2. Install components and design definitions:
    `npm install @kiva/kv-components && npm install @kiva/kv-tokens --save-dev`
-3. Add our tailwind config as a [preset](https://tailwindcss.com/docs/configuration#presets) in your tailwind.config.js
+3. Add our Tailwind config as a [preset](https://tailwindcss.com/docs/configuration#presets) in your tailwind.config.js
 
 ```js
 // tailwind.config.js

package/__mocks__/ResizeObserver.js

@@ -0,0 +1,13 @@
+/* eslint-disable class-methods-use-this */
+class ResizeObserver {
+	observe() {
+		// do nothing
+	}
+
+	disconnect() {
+		// do nothing
+	}
+}
+
+window.ResizeObserver = ResizeObserver;
+export default ResizeObserver;

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@kiva/kv-components",
-  "version": "1.4.5",
+  "version": "3.0.1",
+  "type": "module",
   "publishConfig": {
     "access": "public"
   },
@@ -18,8 +19,10 @@
     "@storybook/addons": "^6.4.17",
     "@storybook/vue": "^6.4.17",
     "@testing-library/dom": "^8.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.8.1",
+    "@vue/composition-api": "^1.4.1",
     "autoprefixer": "^10.4.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^27.0.6",
@@ -30,30 +33,40 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-storybook": "^0.5.6",
     "eslint-plugin-vue": "^7.9.0",
-    "jest": "^27.0.6",
+    "jest": "^27.4.3",
     "jest-axe": "^5.0.1",
     "postcss": "^8.4.5",
     "storybook-dark-mode": "^1.0.8",
     "tailwindcss": "^3.0.18",
-    "vue-jest": "^3.0.7",
+    "vue": "^2.6.14",
     "vue-loader": "^15.9.6",
     "vue-router": "^3.5.2",
     "vue-template-compiler": "^2.6.12"
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006 -c vue/.storybook",
-    "build-storybook": "build-storybook -c vue/.storybook",
+    "storybook": "vue-demi-switch 2 && start-storybook -p 6006 -c vue/.storybook",
+    "build-storybook": "vue-demi-switch 2 && build-storybook -c vue/.storybook",
     "lint": "eslint --ext .js,.vue ./",
-    "test": "jest"
+    "test": "npm run lint"
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^1.3.2",
+    "@kiva/kv-tokens": "^2.0.1",
     "@mdi/js": "^5.9.55",
+    "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
     "embla-carousel": "^4.5.3",
+    "focus-trap": "^6.7.2",
     "nanoid": "^3.1.23",
-    "vue": "^2.6.12",
-    "vue-focus-lock": "^1.4.1"
+    "vue-demi": "^0.12.1"
   },
-  "gitHead": "12bb59eb8dbffd590a8624347a8a3f98bf5ffba3"
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.6.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
+  "gitHead": "2a8ff1a1fb9a3ad59f371d1e938a858e52372c62"
 }

package/{postcss.config.js → postcss.config.cjs}

@@ -1,6 +1,6 @@
 module.exports = {
 	plugins: {
 		tailwindcss: {},
-		autoprefixer: {},
-	},
+		autoprefixer: {}
+	}
 };

package/{tailwind.config.js → tailwind.config.cjs}

@@ -1,9 +1,9 @@
 const resolveConfig = require('tailwindcss/resolveConfig'); // eslint-disable-line import/no-extraneous-dependencies
-const { textStyles } = require('@kiva/kv-tokens/configs/kivaTypography');
-const sharedConfig = require('@kiva/kv-tokens/configs/tailwind.config');
+const { textStyles } = require('@kiva/kv-tokens/configs/kivaTypography.cjs');
+const sharedConfig = require('@kiva/kv-tokens/configs/tailwind.config.cjs');
 const {
 	headerNumberCase, kebabCase, buildTailwindClassName,
-} = require('./utils/themeUtils');
+} = require('./utils/themeUtils.cjs');
 
 const config = resolveConfig(sharedConfig);
 const { theme } = config;

package/tests/unit/jest-setup.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);

package/tests/unit/specs/components/KvButton.spec.js

@@ -1,41 +1,38 @@
 import { render, fireEvent } from '@testing-library/vue';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import VueRouter from 'vue-router';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import addVueRouter from '../../utils/addVueRouter';
 import KvButton from '../../../../vue/KvButton.vue';
 
-const router = new VueRouter();
-
-expect.extend(toHaveNoViolations);
-
 describe('Default Button', () => {
+	const renderTestButton = (options) => render(KvButton, addVueRouter({
+		slots: { default: 'Test Button' },
+		...options,
+	}));
+
 	it('renders as a button tag by default', () => {
-		const { getByRole } = render(KvButton, {
-			slots: { default: 'Test Button' },
-		});
+		const { getByRole } = renderTestButton();
 		getByRole('button', { name: 'Test Button' });
 	});
 
 	it('renders as an anchor tag when passed an href prop', () => {
-		const { getByRole } = render(KvButton, {
+		const { getByRole } = renderTestButton({
 			props: { href: 'https://www.example.com/' },
-			slots: { default: 'Test Button' },
 		});
 		const anchorEl = getByRole('link', { name: 'Test Button' });
 		expect(anchorEl.href).toEqual('https://www.example.com/');
 	});
 
 	it('renders as an anchor tag when passed a route string', () => {
-		const { getByRole } = render(KvButton, {
+		const { getByRole } = renderTestButton({
 			props: { to: '/home' },
-			slots: { default: 'Test Button' },
-			routes:	router,
 		});
 		const anchorEl = getByRole('link', { name: 'Test Button' });
 		expect(anchorEl.href).toEqual('http://localhost/#/home');
 	});
 
 	it('renders as an anchor tag when passed a route object', () => {
-		const { getByRole } = render(KvButton, {
+		const { getByRole } = renderTestButton({
 			props: {
 				to: {
 					path: 'test-route-with-query',
@@ -44,35 +41,51 @@ describe('Default Button', () => {
 					},
 				},
 			},
-			slots: { default: 'Test Button' },
-			routes:	router,
 		});
 		const anchorEl = getByRole('link', { name: 'Test Button' });
 		expect(anchorEl.href).toEqual('http://localhost/#/test-route-with-query?param1=a');
 	});
 
 	it('shows a ripple animation when clicked', async () => {
-		const { getByText, getByTestId } = render(KvButton, {
-			slots: { default: 'Test Button' },
-		});
+		const { getByText, getByTestId } = renderTestButton();
 		const btnEl = getByText('Test Button');
 		await fireEvent.click(btnEl);
 		getByTestId('ripple');
 	});
 
+	it('passes through click events', async () => {
+		const onClick = jest.fn();
+		const { getByText } = render({
+			template: `<div>
+				<KvButton @click.prevent="onClick">Button tag</KvButton>
+				<KvButton href="#test" @click.prevent="onClick">Anchor tag</KvButton>
+				<KvButton to="/test" @click.native.prevent="onClick">Router-link</KvButton>
+			</div>`,
+			components: {
+				KvButton,
+			},
+			methods: {
+				onClick,
+			},
+		}, addVueRouter());
+
+		// Click all the buttons and expect the onClick method to have been called 3 times
+		await userEvent.click(getByText('Button tag'));
+		await userEvent.click(getByText('Anchor tag'));
+		await userEvent.click(getByText('Router-link'));
+		expect(onClick.mock.calls.length).toBe(3);
+	});
+
 	it('when passed a loading prop, the button is disabled', () => {
-		const { getByRole } = render(KvButton, {
+		const { getByRole } = renderTestButton({
 			props: { state: 'loading' },
-			slots: { default: 'Test Button' },
 		});
 		const btnEl = getByRole('button', { name: 'Test Button' });
 		expect(btnEl.disabled).toBeTruthy();
 	});
 
 	it('has no automated accessibility violations', async () => {
-		const { container } = render(KvButton, {
-			slots: { default: 'Test Button' },
-		});
+		const { container } = renderTestButton();
 		const results = await axe(container);
 		expect(results).toHaveNoViolations();
 	});

package/tests/unit/specs/components/KvCarousel.spec.js

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvCarousel from '../../../../vue/KvCarousel.vue';
+
+describe('KvCarousel', () => {
+	it('has no automated accessibility violations', async () => {
+		const { container } = render(KvCarousel);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

package/tests/unit/specs/components/KvCheckbox.spec.js

@@ -1,9 +1,7 @@
-import { render } from '@testing-library/vue';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { render, fireEvent } from '@testing-library/vue';
+import { axe } from 'jest-axe';
 import KvCheckbox from '../../../../vue/KvCheckbox.vue';
 
-expect.extend(toHaveNoViolations);
-
 describe('KvCheckbox', () => {
 	it('renders with a role of "checkbox"', () => {
 		const { getByRole } = render(KvCheckbox, {
@@ -26,18 +24,79 @@ describe('KvCheckbox', () => {
 		expect(checkboxEl.checked).toEqual(false);
 	});
 
-	it('emits a change event when toggled', async () => {
-		const { getByLabelText, emitted } = render(KvCheckbox, {
-			slots: { default: 'Test Checkbox' },
-		});
-		const checkboxEl = getByLabelText('Test Checkbox');
+	it('works with v-model', async () => {
+		const TestComponent = {
+			template:
+				`<div>
+					<KvCheckbox v-model="checkboxValue">Test Checkbox</KvCheckbox>
+					<button @click="checkboxValue = false">reset</button>
+					<span>The checkbox value is {{ checkboxValue }}</span>
+				</div>`,
+			components: { KvCheckbox },
+			data: () => ({ checkboxValue: false }),
+		};
+		const { getByLabelText, getByText } = render(TestComponent);
+		const checkboxEl = getByText('Test Checkbox');
+		const checkboxInput = getByLabelText('Test Checkbox');
 
-		await checkboxEl.click();
-		expect(emitted().change[0]).toEqual([true]);
+		// Check that the value is `false` initially
+		expect(getByText('The checkbox value is false')).toBeDefined();
+		expect(checkboxInput.checked).toEqual(false);
 
-		await checkboxEl.click();
-		expect(emitted().change[1]).toEqual([false]);
-		expect(emitted().change.length).toBe(2);
+		// Click the checkbox and expect the value to be `true` now
+		await fireEvent.click(checkboxEl);
+		expect(getByText('The checkbox value is true')).toBeDefined();
+		expect(checkboxInput.checked).toEqual(true);
+
+		// Click the reset button and expect the value to be `false` again
+		await fireEvent.click(getByText('reset'));
+		expect(getByText('The checkbox value is false')).toBeDefined();
+		expect(checkboxInput.checked).toEqual(false);
+	});
+
+	it('applies parent event listeners to the input element', async () => {
+		const onInput = jest.fn();
+		const TestComponent = {
+			template: '<KvCheckbox @input="onInput">Test Checkbox</KvCheckbox>',
+			components: { KvCheckbox },
+			methods: { onInput },
+		};
+		const { getByText } = render(TestComponent);
+
+		const checkboxEl = getByText('Test Checkbox');
+		await fireEvent.click(checkboxEl);
+		expect(onInput.mock.calls.length).toBe(1);
+	});
+
+	it('applies parent attributes to the input element', async () => {
+		const TestComponent = {
+			template: '<KvCheckbox name="test-checkbox">Test Checkbox</KvCheckbox>',
+			components: { KvCheckbox },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const checkboxEl = getByRole('checkbox');
+		expect(checkboxEl.name).toBe('test-checkbox');
+	});
+
+	it('applies parent styles to the root element', async () => {
+		const TestComponent = {
+			template: '<KvCheckbox style="padding-top:1234px">Test Checkbox</KvCheckbox>',
+			components: { KvCheckbox },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.style.paddingTop).toEqual('1234px');
+	});
+
+	it('applies parent classes to the root element', async () => {
+		const TestComponent = {
+			template: '<KvCheckbox class="test-class">Test Checkbox</KvCheckbox>',
+			components: { KvCheckbox },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.classList).toContain('test-class');
 	});
 
 	it('has no automated accessibility violations', async () => {

package/tests/unit/specs/components/KvLightbox.spec.js

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvLightbox from '../../../../vue/KvLightbox.vue';
+
+describe('KvLightbox', () => {
+	it('has no automated accessibility violations', async () => {
+		const { container } = render(KvLightbox,
+			{
+				props: { title: 'Lightbox Title' },
+			});
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

package/tests/unit/specs/components/KvProgressBar.spec.js

@@ -0,0 +1,11 @@
+import { render } from '@testing-library/vue';
+import KvProgressBar from '../../../../vue/KvProgressBar.vue';
+
+describe('KvProgressBar', () => {
+	it('renders with a role of "progressbar"', () => {
+		const { getByRole } = render(KvProgressBar);
+		const progressbarEl = getByRole('progressbar');
+
+		expect(progressbarEl).toBeDefined();
+	});
+});

package/tests/unit/specs/components/KvRadio.spec.js

@@ -1,9 +1,7 @@
-import { render } from '@testing-library/vue';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { render, fireEvent } from '@testing-library/vue';
+import { axe } from 'jest-axe';
 import KvRadio from '../../../../vue/KvRadio.vue';
 
-expect.extend(toHaveNoViolations);
-
 const radioGroup = {
 	components: { KvRadio },
 	data() { return { testModel: 'foo' }; },
@@ -70,7 +68,6 @@ describe('KvRadio', () => {
 	it('One radio element can be checked at a time', async () => {
 		const { getAllByRole, getByLabelText } = render(radioGroup);
 		const radioEls = getAllByRole('radio');
-
 		expect(radioEls[0].value).toBe('foo');
 		expect(radioEls[1].value).toBe('bar');
 		expect(radioEls[2].value).toBe('baz');
@@ -87,6 +84,98 @@ describe('KvRadio', () => {
 		expect(radioEls[2].checked).toBe(true);
 	});
 
+	it('works with v-model', async () => {
+		const TestComponent = {
+			template:
+				`<fieldset>
+					<KvRadio v-model="radioValue" value="foo">Foo</KvRadio>
+					<KvRadio v-model="radioValue" value="bar">Bar</KvRadio>
+					<KvRadio v-model="radioValue" value="baz">Baz</KvRadio>
+					<button @click="radioValue = 'baz'">choose baz</button>
+					<button @click="radioValue = ''">reset</button>
+					<span>The radio value is {{ radioValue }}</span>
+				</fieldset>`,
+			components: { KvRadio },
+			data: () => ({ radioValue: 'bar' }),
+		};
+		const { getByLabelText, getByText } = render(TestComponent);
+		const radioFoo = getByLabelText('Foo');
+		const radioBar = getByLabelText('Bar');
+		const radioBaz = getByLabelText('Baz');
+
+		// Check that the value is 'bar' initially
+		expect(getByText('The radio value is bar')).toBeDefined();
+		expect(radioFoo.checked).toBe(false);
+		expect(radioBar.checked).toBe(true);
+		expect(radioBaz.checked).toBe(false);
+
+		// Click the 'Foo' radio and expect the value to be 'foo' now
+		await fireEvent.click(radioFoo);
+		expect(getByText('The radio value is foo')).toBeDefined();
+		expect(radioFoo.checked).toBe(true);
+		expect(radioBar.checked).toBe(false);
+		expect(radioBaz.checked).toBe(false);
+
+		// Click the 'choose baz' button and expect the value to be 'baz' now
+		await fireEvent.click(getByText('choose baz'));
+		expect(getByText('The radio value is baz')).toBeDefined();
+		expect(radioFoo.checked).toBe(false);
+		expect(radioBar.checked).toBe(false);
+		expect(radioBaz.checked).toBe(true);
+
+		// Click the reset button and expect the value to be blank now
+		await fireEvent.click(getByText('reset'));
+		expect(getByText('The radio value is')).toBeDefined();
+		expect(radioFoo.checked).toBe(false);
+		expect(radioBar.checked).toBe(false);
+		expect(radioBaz.checked).toBe(false);
+	});
+
+	it('applies parent event listeners to the input element', async () => {
+		const onInput = jest.fn();
+		const TestComponent = {
+			template: '<KvRadio @input="onInput" value="foo">Foo</KvRadio>',
+			components: { KvRadio },
+			methods: { onInput },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const radioEl = getByRole('radio');
+		await fireEvent.click(radioEl);
+		expect(onInput.mock.calls.length).toBe(1);
+	});
+
+	it('applies parent attributes to the input element', async () => {
+		const TestComponent = {
+			template: '<KvRadio name="test-radio" value="foo">Foo</KvRadio>',
+			components: { KvRadio },
+		};
+		const { getByRole } = render(TestComponent);
+
+		const radioEl = getByRole('radio');
+		expect(radioEl.name).toBe('test-radio');
+	});
+
+	it('applies parent styles to the root element', async () => {
+		const TestComponent = {
+			template: '<KvRadio style="padding-top:1234px" value="foo">Foo</KvRadio>',
+			components: { KvRadio },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.style.paddingTop).toEqual('1234px');
+	});
+
+	it('applies parent classes to the root element', async () => {
+		const TestComponent = {
+			template: '<KvRadio class="test-class" value="foo">Foo</KvRadio>',
+			components: { KvRadio },
+		};
+		const { container } = render(TestComponent);
+
+		expect(container.firstChild.classList).toContain('test-class');
+	});
+
 	it('has no automated accessibility violations', async () => {
 		const { container } = render(radioGroup);
 		const results = await axe(container);