diff --git a/components/form/demo/api.html b/components/form/demo/api.html
index 468765c3..607dd8c9 100644
--- a/components/form/demo/api.html
+++ b/components/form/demo/api.html
@@ -40,7 +40,7 @@
Prism.highlightAll();
});
-
+
diff --git a/components/form/demo/api.js b/components/form/demo/api.js
new file mode 100644
index 00000000..bfeed480
--- /dev/null
+++ b/components/form/demo/api.js
@@ -0,0 +1,3 @@
+import { AuroForm } from "../src/auro-form.js"
+
+AuroForm.register();
diff --git a/components/form/demo/api.min.js b/components/form/demo/api.min.js
new file mode 100644
index 00000000..84534f60
--- /dev/null
+++ b/components/form/demo/api.min.js
@@ -0,0 +1,67 @@
+import { css, LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ *
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
+ */
+
+// build the component class
+class AuroForm extends LitElement {
+ // constructor() {
+ // super();
+ // }
+
+ // This function is to define props used within the scope of this component
+ // Be sure to review https://lit.dev/docs/components/properties/
+ // to understand how to use reflected attributes with your property settings.
+ static get properties() {
+ return {
+ // ...super.properties,
+
+ // this property is DEMO ONLY! Please delete.
+ cssClass: { type: String }
+ };
+ }
+
+ static get styles() {
+ return [styleCss];
+ }
+
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroForm.register("custom-form") // this will register this element to
+ *
+ */
+ static register(name = "auro-form") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+ }
+
+ // When using auroElement, use the following attribute and function when hiding content from screen readers.
+ // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+ // function that renders the HTML and CSS into the scope of the component
+ render() {
+ return html`
+
+
+
+
+
+ `;
+ }
+}
+
+AuroForm.register();
diff --git a/components/form/demo/index.html b/components/form/demo/index.html
index 49025d30..f5607266 100644
--- a/components/form/demo/index.html
+++ b/components/form/demo/index.html
@@ -40,7 +40,7 @@
Prism.highlightAll();
});
-
+
diff --git a/components/form/demo/index.js b/components/form/demo/index.js
new file mode 100644
index 00000000..4a9d9856
--- /dev/null
+++ b/components/form/demo/index.js
@@ -0,0 +1,4 @@
+import { AuroForm } from '../src/auro-form.js';
+
+AuroForm.register();
+AuroForm.register('custom-form');
diff --git a/components/form/demo/index.min.js b/components/form/demo/index.min.js
new file mode 100644
index 00000000..4aa8cd28
--- /dev/null
+++ b/components/form/demo/index.min.js
@@ -0,0 +1,68 @@
+import { css, LitElement, html } from 'lit';
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.testClass{display:inline-block;padding:var(--auro-text-body-size-default);border:1px solid var(--auro-color-border-error-on-light);color:var(--auro-color-border-error-on-light)}:focus-visible{background-color:var(--auro-color-border-error-on-light);color:var(--auro-color-base-white)}`;
+
+// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+
+// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
+/**
+ * The auro-form element provides users a way to ... (it would be great if you fill this out).
+ *
+ * @attr {Boolean} fixed - Uses fixed pixel values for element shape
+ * @attr {String} cssClass - Applies designated CSS class to demo element - you want to delete me!
+ */
+
+// build the component class
+class AuroForm extends LitElement {
+ // constructor() {
+ // super();
+ // }
+
+ // This function is to define props used within the scope of this component
+ // Be sure to review https://lit.dev/docs/components/properties/
+ // to understand how to use reflected attributes with your property settings.
+ static get properties() {
+ return {
+ // ...super.properties,
+
+ // this property is DEMO ONLY! Please delete.
+ cssClass: { type: String }
+ };
+ }
+
+ static get styles() {
+ return [styleCss];
+ }
+
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroForm.register("custom-form") // this will register this element to
+ *
+ */
+ static register(name = "auro-form") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+ }
+
+ // When using auroElement, use the following attribute and function when hiding content from screen readers.
+ // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
+
+ // function that renders the HTML and CSS into the scope of the component
+ render() {
+ return html`
+
+
+
+
+
+ `;
+ }
+}
+
+AuroForm.register();
+AuroForm.register('custom-form');
diff --git a/components/form/docs/partials/demo.md b/components/form/docs/partials/demo.md
index 1cb0bf37..9547c642 100644
--- a/components/form/docs/partials/demo.md
+++ b/components/form/docs/partials/demo.md
@@ -44,13 +44,14 @@ Having a closing statement about your example helps to really complete the thoug
## Recommended Use and Version Control
-There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-form` custom element is defined automatically.
+There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-form` custom element is defined automatically.
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroForm.register(name)` method and pass in a unique name.
```js
-import './node_modules/@aurodesignsystem/auro-form';
-registerComponent('custom-form');
+import { AuroForm } from './node_modules/@aurodesignsystem/auro-form/src/auro-form';
+
+AuroForm.register('custom-form');
```
This will create a new custom element that you can use in your HTML that will function identically to the `auro-form` element.
diff --git a/components/form/index.js b/components/form/index.js
new file mode 100644
index 00000000..395858fe
--- /dev/null
+++ b/components/form/index.js
@@ -0,0 +1,3 @@
+import { AuroForm } from './src/auro-form.js';
+
+AuroForm.register();
diff --git a/components/form/src/auro-form.js b/components/form/src/auro-form.js
index 8eb26468..cc58b89b 100644
--- a/components/form/src/auro-form.js
+++ b/components/form/src/auro-form.js
@@ -14,6 +14,8 @@ import { LitElement, html } from "lit";
// Import touch detection lib
import styleCss from "./styles/style-css.js";
+import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
/**
* The auro-form element provides users a way to ... (it would be great if you fill this out).
@@ -44,6 +46,18 @@ export class AuroForm extends LitElement {
return [styleCss];
}
+ /**
+ * This will register this element with the browser.
+ * @param {string} [name="auro-form"] - The name of element that you want to register to.
+ *
+ * @example
+ * AuroForm.register("custom-form") // this will register this element to
+ *
+ */
+ static register(name = "auro-form") {
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroForm);
+ }
+
// When using auroElement, use the following attribute and function when hiding content from screen readers.
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
@@ -58,8 +72,3 @@ export class AuroForm extends LitElement {
`;
}
}
-
-// default internal definition
-if (!customElements.get("auro-form")) {
- customElements.define("auro-form", AuroForm);
-}
diff --git a/components/form/src/index.js b/components/form/src/index.js
deleted file mode 100644
index 9a58b5b9..00000000
--- a/components/form/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { AuroForm } from './auro-form.js';
-
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
-const registerComponent = (name = 'custom-form') => {
- // alias definition
- if (!customElements.get(name)) {
- customElements.define(name, class extends AuroForm {});
- }
-};
-
-export { registerComponent };
diff --git a/components/input/src/index.js b/components/input/index.js
similarity index 77%
rename from components/input/src/index.js
rename to components/input/index.js
index ca048c82..a6cac7b1 100644
--- a/components/input/src/index.js
+++ b/components/input/index.js
@@ -1,4 +1,4 @@
-import { AuroInput } from './auro-input.js';
+import { AuroInput } from './src/auro-input.js';
import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
RuntimeUtils.default.prototype.registerComponent('custom-input', AuroInput);
diff --git a/index.js b/index.js
index 57bcffe7..46def3df 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,5 @@
// @TODO: import all components
// import { AuroDropdown } from './components/dropdown/src/';
-// import { AuroForm } from './components/form/src/';
-// import { AuroInput } from './components/input/src/';
\ No newline at end of file
+
+import './components/input/index.js';
+import './components/form/index.js';
diff --git a/rollup.config.mjs b/rollup.config.mjs
index 85d43b24..3d4c82c0 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -45,4 +45,19 @@ const componentConfigs = getComponentEntryPoints().map(({ name, input, output })
createConfig(name, input, output)
);
-export default [mainConfig, ...componentConfigs];
\ No newline at end of file
+
+function createExampleConfig(componentName, entryPoint) {
+ return {
+ input: {
+ [`${entryPoint}.min`]: `./components/${componentName}/demo/${entryPoint}.js`,
+ },
+ output: {
+ format: 'esm',
+ dir: `./components/${componentName}/demo/`,
+ },
+ };
+}
+
+const docConfig = [createExampleConfig('form', 'index'), createExampleConfig('form', 'api')];
+
+export default [mainConfig, ...componentConfigs, ...docConfig];
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 79d3350d..f89b797d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
"index.js",
// process the sub-component JS
"components/*/src/*.js"
- ],
+, "components/input/index.js" ],
"exclude": [],
"compilerOptions": {
// Tells TypeScript to read JS files, as