diff --git a/addons/rose/addon/templates/components/rose/anonymous.hbs b/addons/rose/addon/components/rose/anonymous/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/anonymous.hbs
rename to addons/rose/addon/components/rose/anonymous/index.hbs
diff --git a/addons/rose/addon/components/rose/anonymous.js b/addons/rose/addon/components/rose/anonymous/index.js
similarity index 80%
rename from addons/rose/addon/components/rose/anonymous.js
rename to addons/rose/addon/components/rose/anonymous/index.js
index c5321f53a..1f1715d28 100644
--- a/addons/rose/addon/components/rose/anonymous.js
+++ b/addons/rose/addon/components/rose/anonymous/index.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../templates/components/rose/anonymous';
+import layout from './index';
 
 /**
  * An otherwise empty component that renders a block.  Used only by components
diff --git a/addons/rose/addon/components/rose/anonymous.stories.mdx b/addons/rose/addon/components/rose/anonymous/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/anonymous.stories.mdx
rename to addons/rose/addon/components/rose/anonymous/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/checkbox.js b/addons/rose/addon/components/rose/form/checkbox.js
deleted file mode 100644
index ad6ad3f38..000000000
--- a/addons/rose/addon/components/rose/form/checkbox.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/checkbox';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A simple HTML `<input type="checkbox">` element.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/checkbox.hbs b/addons/rose/addon/components/rose/form/checkbox/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/checkbox.hbs
rename to addons/rose/addon/components/rose/form/checkbox/index.hbs
diff --git a/addons/rose/addon/components/rose/form/checkbox/index.js b/addons/rose/addon/components/rose/form/checkbox/index.js
new file mode 100644
index 000000000..b13f24e4f
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/checkbox/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormCheckboxComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/form/checkbox.stories.mdx b/addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/checkbox.stories.mdx
rename to addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/errors.js b/addons/rose/addon/components/rose/form/errors.js
deleted file mode 100644
index bc13c3f56..000000000
--- a/addons/rose/addon/components/rose/form/errors.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/errors';
-
-/**
- * A container for error messages.  Yields the error message component.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/errors.hbs b/addons/rose/addon/components/rose/form/errors/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/errors.hbs
rename to addons/rose/addon/components/rose/form/errors/index.hbs
diff --git a/addons/rose/addon/components/rose/form/errors.stories.mdx b/addons/rose/addon/components/rose/form/errors/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/errors.stories.mdx
rename to addons/rose/addon/components/rose/form/errors/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/errors/message.js b/addons/rose/addon/components/rose/form/errors/message.js
deleted file mode 100644
index 0f59c6b06..000000000
--- a/addons/rose/addon/components/rose/form/errors/message.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/errors/message';
-
-/**
- * A simple, styled error message.  Do not use directly.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/errors/message.hbs b/addons/rose/addon/components/rose/form/errors/message/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/errors/message.hbs
rename to addons/rose/addon/components/rose/form/errors/message/index.hbs
diff --git a/addons/rose/addon/components/rose/form/errors/message.stories.mdx b/addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/errors/message.stories.mdx
rename to addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/helper-text.js b/addons/rose/addon/components/rose/form/helper-text.js
deleted file mode 100644
index 399088c44..000000000
--- a/addons/rose/addon/components/rose/form/helper-text.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/helper-text';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/helper-text.hbs b/addons/rose/addon/components/rose/form/helper-text/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/helper-text.hbs
rename to addons/rose/addon/components/rose/form/helper-text/index.hbs
diff --git a/addons/rose/addon/components/rose/form/helper-text.stories.mdx b/addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/helper-text.stories.mdx
rename to addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/input.js b/addons/rose/addon/components/rose/form/input.js
deleted file mode 100644
index 60ae3d0f1..000000000
--- a/addons/rose/addon/components/rose/form/input.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/input';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A simple HTML `<input>` element.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/input.hbs b/addons/rose/addon/components/rose/form/input/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/input.hbs
rename to addons/rose/addon/components/rose/form/input/index.hbs
diff --git a/addons/rose/addon/components/rose/form/input/index.js b/addons/rose/addon/components/rose/form/input/index.js
new file mode 100644
index 000000000..4fbc071f4
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/input/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormInputComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/form/input.stories.mdx b/addons/rose/addon/components/rose/form/input/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/input.stories.mdx
rename to addons/rose/addon/components/rose/form/input/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/input/input.js b/addons/rose/addon/components/rose/form/input/input.js
deleted file mode 100644
index f20d86c82..000000000
--- a/addons/rose/addon/components/rose/form/input/input.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/input/input';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/input/input.hbs b/addons/rose/addon/components/rose/form/input/input/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/input/input.hbs
rename to addons/rose/addon/components/rose/form/input/input/index.hbs
diff --git a/addons/rose/addon/components/rose/form/label.js b/addons/rose/addon/components/rose/form/label.js
deleted file mode 100644
index 1d26edc8d..000000000
--- a/addons/rose/addon/components/rose/form/label.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/label';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/label.hbs b/addons/rose/addon/components/rose/form/label/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/label.hbs
rename to addons/rose/addon/components/rose/form/label/index.hbs
diff --git a/addons/rose/addon/components/rose/form/label.stories.mdx b/addons/rose/addon/components/rose/form/label/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/label.stories.mdx
rename to addons/rose/addon/components/rose/form/label/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/radio/group.js b/addons/rose/addon/components/rose/form/radio/group.js
deleted file mode 100644
index 80bba183e..000000000
--- a/addons/rose/addon/components/rose/form/radio/group.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/radio/group';
-
-/**
- * A `<input type="radio" name="radio-group">` element.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/radio/group.hbs b/addons/rose/addon/components/rose/form/radio/group/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/radio/group.hbs
rename to addons/rose/addon/components/rose/form/radio/group/index.hbs
diff --git a/addons/rose/addon/components/rose/form/radio/group.stories.mdx b/addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/radio/group.stories.mdx
rename to addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/radio/radio.js b/addons/rose/addon/components/rose/form/radio/radio.js
deleted file mode 100644
index 196e47951..000000000
--- a/addons/rose/addon/components/rose/form/radio/radio.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/radio/radio';
-import ComponentAutoId from '../../../../mixins/component-auto-id';
-
-/**
- * A `<input type="radio">` element.
- * `value` and `selectedValue` must be equal to select
- *  radiofield.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/radio/radio.hbs b/addons/rose/addon/components/rose/form/radio/radio/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/radio/radio.hbs
rename to addons/rose/addon/components/rose/form/radio/radio/index.hbs
diff --git a/addons/rose/addon/components/rose/form/radio/radio/index.js b/addons/rose/addon/components/rose/form/radio/radio/index.js
new file mode 100644
index 000000000..ac2c2a6ec
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/radio/radio/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../../utilities/component-auto-id';
+
+export default class RoseFormRadioRadioComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/form/radio/radio.stories.mdx b/addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/radio/radio.stories.mdx
rename to addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/select.js b/addons/rose/addon/components/rose/form/select.js
deleted file mode 100644
index c71537542..000000000
--- a/addons/rose/addon/components/rose/form/select.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/select';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A `<select>` element context component which yields option components.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/select.hbs b/addons/rose/addon/components/rose/form/select/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/select.hbs
rename to addons/rose/addon/components/rose/form/select/index.hbs
diff --git a/addons/rose/addon/components/rose/form/select/index.js b/addons/rose/addon/components/rose/form/select/index.js
new file mode 100644
index 000000000..9690ea00f
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/select/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormSelectComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/form/select.stories.mdx b/addons/rose/addon/components/rose/form/select/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/select.stories.mdx
rename to addons/rose/addon/components/rose/form/select/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/select/select.js b/addons/rose/addon/components/rose/form/select/select.js
deleted file mode 100644
index 7e55d8c55..000000000
--- a/addons/rose/addon/components/rose/form/select/select.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/select/select';
-
-/**
- * This component is used internally by rose/form/select and should not be
- * instantiated directly.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/select/select.hbs b/addons/rose/addon/components/rose/form/select/select/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/select/select.hbs
rename to addons/rose/addon/components/rose/form/select/select/index.hbs
diff --git a/addons/rose/addon/components/rose/form/textarea.js b/addons/rose/addon/components/rose/form/textarea.js
deleted file mode 100644
index 8ca045e84..000000000
--- a/addons/rose/addon/components/rose/form/textarea.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/form/textarea';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A `<textarea>` element essentially identical to `Rose::Form::Input` except
- * for the field element.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/textarea.hbs b/addons/rose/addon/components/rose/form/textarea/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/textarea.hbs
rename to addons/rose/addon/components/rose/form/textarea/index.hbs
diff --git a/addons/rose/addon/components/rose/form/textarea/index.js b/addons/rose/addon/components/rose/form/textarea/index.js
new file mode 100644
index 000000000..bbe402965
--- /dev/null
+++ b/addons/rose/addon/components/rose/form/textarea/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseFormTextareaComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/form/textarea.stories.mdx b/addons/rose/addon/components/rose/form/textarea/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/form/textarea.stories.mdx
rename to addons/rose/addon/components/rose/form/textarea/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/form/textarea/textarea.js b/addons/rose/addon/components/rose/form/textarea/textarea.js
deleted file mode 100644
index 3e9bbb99b..000000000
--- a/addons/rose/addon/components/rose/form/textarea/textarea.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/form/textarea/textarea';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs b/addons/rose/addon/components/rose/form/textarea/textarea/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/form/textarea/textarea.hbs
rename to addons/rose/addon/components/rose/form/textarea/textarea/index.hbs
diff --git a/addons/rose/addon/components/rose/layout/centered.js b/addons/rose/addon/components/rose/layout/centered.js
deleted file mode 100644
index ddebf0b09..000000000
--- a/addons/rose/addon/components/rose/layout/centered.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/centered';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/layout/centered.hbs b/addons/rose/addon/components/rose/layout/centered/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/layout/centered.hbs
rename to addons/rose/addon/components/rose/layout/centered/index.hbs
diff --git a/addons/rose/addon/components/rose/layout/centered.stories.mdx b/addons/rose/addon/components/rose/layout/centered/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/layout/centered.stories.mdx
rename to addons/rose/addon/components/rose/layout/centered/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/layout/global.js b/addons/rose/addon/components/rose/layout/global.js
deleted file mode 100644
index c9beb6f91..000000000
--- a/addons/rose/addon/components/rose/layout/global.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/global';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/layout/global.hbs b/addons/rose/addon/components/rose/layout/global/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/layout/global.hbs
rename to addons/rose/addon/components/rose/layout/global/index.hbs
diff --git a/addons/rose/addon/components/rose/layout/global.stories.mdx b/addons/rose/addon/components/rose/layout/global/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/layout/global.stories.mdx
rename to addons/rose/addon/components/rose/layout/global/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/layout/page.js b/addons/rose/addon/components/rose/layout/page.js
deleted file mode 100644
index 10190bcba..000000000
--- a/addons/rose/addon/components/rose/layout/page.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/page';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/layout/page.hbs b/addons/rose/addon/components/rose/layout/page/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/layout/page.hbs
rename to addons/rose/addon/components/rose/layout/page/index.hbs
diff --git a/addons/rose/addon/components/rose/layout/page.stories.mdx b/addons/rose/addon/components/rose/layout/page/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/layout/page.stories.mdx
rename to addons/rose/addon/components/rose/layout/page/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/layout/sidebar.js b/addons/rose/addon/components/rose/layout/sidebar.js
deleted file mode 100644
index b58f2003a..000000000
--- a/addons/rose/addon/components/rose/layout/sidebar.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/layout/sidebar';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/layout/sidebar.hbs b/addons/rose/addon/components/rose/layout/sidebar/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/layout/sidebar.hbs
rename to addons/rose/addon/components/rose/layout/sidebar/index.hbs
diff --git a/addons/rose/addon/components/rose/layout/sidebar.stories.mdx b/addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/layout/sidebar.stories.mdx
rename to addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
diff --git a/addons/rose/addon/templates/components/rose/link-button.hbs b/addons/rose/addon/components/rose/link-button/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/link-button.hbs
rename to addons/rose/addon/components/rose/link-button/index.hbs
diff --git a/addons/rose/addon/components/rose/link-button.js b/addons/rose/addon/components/rose/link-button/index.js
similarity index 92%
rename from addons/rose/addon/components/rose/link-button.js
rename to addons/rose/addon/components/rose/link-button/index.js
index f2e283b63..97f6601ba 100644
--- a/addons/rose/addon/components/rose/link-button.js
+++ b/addons/rose/addon/components/rose/link-button/index.js
@@ -1,5 +1,5 @@
 import LinkComponent from '@ember/routing/link-component';
-import layout from '../../templates/components/rose/link-button';
+import layout from './index';
 import { computed } from '@ember/object';
 
 /**
diff --git a/addons/rose/addon/components/rose/link-button.stories.mdx b/addons/rose/addon/components/rose/link-button/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/link-button.stories.mdx
rename to addons/rose/addon/components/rose/link-button/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/list/key-value.js b/addons/rose/addon/components/rose/list/key-value.js
deleted file mode 100644
index 279a84e82..000000000
--- a/addons/rose/addon/components/rose/list/key-value.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/list/key-value';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/list/key-value.hbs b/addons/rose/addon/components/rose/list/key-value/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/list/key-value.hbs
rename to addons/rose/addon/components/rose/list/key-value/index.hbs
diff --git a/addons/rose/addon/components/rose/list/key-value.stories.mdx b/addons/rose/addon/components/rose/list/key-value/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/list/key-value.stories.mdx
rename to addons/rose/addon/components/rose/list/key-value/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/list/key-value/item.js b/addons/rose/addon/components/rose/list/key-value/item.js
deleted file mode 100644
index 37c30217d..000000000
--- a/addons/rose/addon/components/rose/list/key-value/item.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../../templates/components/rose/list/key-value/item';
-import ComponentAutoId from '../../../../mixins/component-auto-id';
-
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/list/key-value/item.hbs b/addons/rose/addon/components/rose/list/key-value/item/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/list/key-value/item.hbs
rename to addons/rose/addon/components/rose/list/key-value/item/index.hbs
diff --git a/addons/rose/addon/components/rose/list/key-value/item/index.js b/addons/rose/addon/components/rose/list/key-value/item/index.js
new file mode 100644
index 000000000..a166c7897
--- /dev/null
+++ b/addons/rose/addon/components/rose/list/key-value/item/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../../utilities/component-auto-id';
+
+export default class RoseListKeyValueItemComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs.js b/addons/rose/addon/components/rose/nav/breadcrumbs.js
deleted file mode 100644
index 0f915d890..000000000
--- a/addons/rose/addon/components/rose/nav/breadcrumbs.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/nav/breadcrumbs';
-
-/**
- * A navigation component with links.
- */
-export default Component.extend({
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/nav/breadcrumbs.hbs b/addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/nav/breadcrumbs.hbs
rename to addons/rose/addon/components/rose/nav/breadcrumbs/index.hbs
diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs.stories.mdx b/addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/nav/breadcrumbs.stories.mdx
rename to addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
diff --git a/addons/rose/addon/components/rose/nav/sidebar.js b/addons/rose/addon/components/rose/nav/sidebar.js
deleted file mode 100644
index 40b8900e4..000000000
--- a/addons/rose/addon/components/rose/nav/sidebar.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/nav/sidebar';
-import ComponentAutoId from '../../../mixins/component-auto-id';
-
-/**
- * A simple navigation component intended for the sidebar layout region.
- */
-export default Component.extend(ComponentAutoId, {
-  layout,
-  tagName: '',
-});
diff --git a/addons/rose/addon/templates/components/rose/nav/sidebar.hbs b/addons/rose/addon/components/rose/nav/sidebar/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/nav/sidebar.hbs
rename to addons/rose/addon/components/rose/nav/sidebar/index.hbs
diff --git a/addons/rose/addon/components/rose/nav/sidebar/index.js b/addons/rose/addon/components/rose/nav/sidebar/index.js
new file mode 100644
index 000000000..1d3b63115
--- /dev/null
+++ b/addons/rose/addon/components/rose/nav/sidebar/index.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { generateComponentID } from '../../../../utilities/component-auto-id';
+
+export default class RoseNavSidebarComponent extends Component {
+
+  // =attributes
+
+  id = generateComponentID();
+
+}
diff --git a/addons/rose/addon/components/rose/nav/sidebar.stories.mdx b/addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/nav/sidebar.stories.mdx
rename to addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
diff --git a/addons/rose/addon/components/rose/nav/tabs.js b/addons/rose/addon/components/rose/nav/tabs.js
deleted file mode 100644
index 5ee542903..000000000
--- a/addons/rose/addon/components/rose/nav/tabs.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/nav/tabs';
-
-export default Component.extend({
-  layout,
-});
diff --git a/addons/rose/addon/templates/components/rose/nav/tabs.hbs b/addons/rose/addon/components/rose/nav/tabs/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/nav/tabs.hbs
rename to addons/rose/addon/components/rose/nav/tabs/index.hbs
diff --git a/addons/rose/addon/components/rose/nav/tabs.stories.mdx b/addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
similarity index 100%
rename from addons/rose/addon/components/rose/nav/tabs.stories.mdx
rename to addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
diff --git a/addons/rose/addon/templates/components/rose/table/row.hbs b/addons/rose/addon/components/rose/table/row/index.hbs
similarity index 100%
rename from addons/rose/addon/templates/components/rose/table/row.hbs
rename to addons/rose/addon/components/rose/table/row/index.hbs
diff --git a/addons/rose/addon/components/rose/table/row.js b/addons/rose/addon/components/rose/table/row/index.js
similarity index 75%
rename from addons/rose/addon/components/rose/table/row.js
rename to addons/rose/addon/components/rose/table/row/index.js
index e94f0cf28..042f937b8 100644
--- a/addons/rose/addon/components/rose/table/row.js
+++ b/addons/rose/addon/components/rose/table/row/index.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/row';
+import layout from './index';
 
 /**
  * A table row component that uses tr table element and
diff --git a/addons/rose/addon/templates/components/rose/table/section.hbs b/addons/rose/addon/components/rose/table/section/index.hbs
similarity index 92%
rename from addons/rose/addon/templates/components/rose/table/section.hbs
rename to addons/rose/addon/components/rose/table/section/index.hbs
index d39e97260..d14bfc6a4 100644
--- a/addons/rose/addon/templates/components/rose/table/section.hbs
+++ b/addons/rose/addon/components/rose/table/section/index.hbs
@@ -1,3 +1,3 @@
 {{yield (hash
   row=(component 'rose/table/row')
-)}}
\ No newline at end of file
+)}}
diff --git a/addons/rose/addon/components/rose/table/section.js b/addons/rose/addon/components/rose/table/section/index.js
similarity index 76%
rename from addons/rose/addon/components/rose/table/section.js
rename to addons/rose/addon/components/rose/table/section/index.js
index 503ed969b..03d0ab453 100644
--- a/addons/rose/addon/components/rose/table/section.js
+++ b/addons/rose/addon/components/rose/table/section/index.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/table/section';
+import layout from './index';
 
 /**
  * A table section component that configures a row component.
diff --git a/addons/rose/addon/mixins/component-auto-id.js b/addons/rose/addon/mixins/component-auto-id.js
deleted file mode 100644
index f970284b8..000000000
--- a/addons/rose/addon/mixins/component-auto-id.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import Mixin from '@ember/object/mixin';
-import { v1 } from 'ember-uuid';
-
-/**
- * Add this mixin to components for an auto-generated ID.
- */
-export default Mixin.create({
-  /**
-   * Generates an ID for this component and assigns it to `this.id`.
-   */
-  init() {
-    this.id = `component-${v1()}`;
-    return this._super(...arguments);
-  },
-});
diff --git a/addons/rose/addon/utilities/component-auto-id.js b/addons/rose/addon/utilities/component-auto-id.js
new file mode 100644
index 000000000..de91ecf92
--- /dev/null
+++ b/addons/rose/addon/utilities/component-auto-id.js
@@ -0,0 +1,9 @@
+import { v1 } from 'ember-uuid';
+
+/**
+ * A function that generates a component ID, based on UUID.
+ * @return {string}
+ */
+export function generateComponentID() {
+  return `component-${v1()}`;
+}
diff --git a/addons/rose/tests/unit/mixins/component-auto-id-test.js b/addons/rose/tests/unit/mixins/component-auto-id-test.js
deleted file mode 100644
index a047b3e7b..000000000
--- a/addons/rose/tests/unit/mixins/component-auto-id-test.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import EmberObject from '@ember/object';
-import ComponentAutoIdMixin from 'rose/mixins/component-auto-id';
-import { module, test } from 'qunit';
-
-module('Unit | Mixin | component-auto-id', function () {
-  test('it generates an ID and assigns it to the object', function (assert) {
-    let ComponentAutoIdObject = EmberObject.extend(ComponentAutoIdMixin);
-    let subject = ComponentAutoIdObject.create();
-    assert.ok(subject.id);
-  });
-});
diff --git a/addons/rose/tests/unit/utilities/component-auto-id-test.js b/addons/rose/tests/unit/utilities/component-auto-id-test.js
new file mode 100644
index 000000000..3da16b9d0
--- /dev/null
+++ b/addons/rose/tests/unit/utilities/component-auto-id-test.js
@@ -0,0 +1,9 @@
+import { generateComponentID } from 'rose/utilities/component-auto-id';
+import { module, test } from 'qunit';
+
+module('Unit | Utility | component-auto-id', function () {
+  test('it generates an ID', function (assert) {
+    const id = generateComponentID();
+    assert.ok(id);
+  });
+});