Reduce JavaScript size by importing custom element definitions directly

app/components/clipboard_button_component.ts

@@ -1 +1 @@
-import '@18f/identity-clipboard-button';
+import '@18f/identity-clipboard-button/clipboard-button-element';

app/components/password_toggle_component.ts

@@ -1 +1 @@
-import '@18f/identity-password-toggle';
+import '@18f/identity-password-toggle/password-toggle-element';

app/components/print_button_component.ts

@@ -1 +1 @@
-import '@18f/identity-print-button';
+import '@18f/identity-print-button/print-button-element';

app/components/spinner_button_component.ts

@@ -1 +1 @@
-import '@18f/identity-spinner-button';
+import '@18f/identity-spinner-button/spinner-button-element';

app/components/validated_field_component.js

@@ -1 +1 @@
-import '@18f/identity-validated-field';
+import '@18f/identity-validated-field/validated-field-element';

app/javascript/packages/clipboard-button/README.md

@@ -6,10 +6,10 @@ Custom element and React implementation for a clipboard button component.
 
 ### Custom Element
 
-Importing the package will register the `<lg-clipboard-button>` custom element:
+Importing the element will register the `<lg-clipboard-button>` custom element:
 
 ```ts
-import '@18f/identity-clipboard-button';
+import '@18f/identity-clipboard-button/clipboard-button-element';
 ```
 
 The custom element will implement the copying behavior, but all markup must already exist, rendered server-side or by the included React component.

app/javascript/packages/clipboard-button/index.ts

@@ -1,3 +1 @@
-import './clipboard-button-element';
-
 export { default as ClipboardButton } from './clipboard-button';

app/javascript/packages/password-toggle/index.ts

@@ -1,3 +1 @@
-import './password-toggle-element';
-
 export { default as PasswordToggle } from './password-toggle';

app/javascript/packages/print-button/README.md

@@ -6,10 +6,10 @@ Custom element and React implementation for a print button component.
 
 ### Custom Element
 
-Importing the package will register the `<lg-print-button>` custom element:
+Importing the element will register the `<lg-print-button>` custom element:
 
 ```ts
-import '@18f/identity-print-button';
+import '@18f/identity-print-button/print-button-element';
 ```
 
 The custom element will implement the behavior to show a print dialog upon click, but all markup must already exist, rendered server-side or by the included React component.

app/javascript/packages/print-button/index.ts

@@ -1,3 +1 @@
-import './print-button-element';
-
 export { default as PrintButton } from './print-button';

app/javascript/packages/spinner-button/index.ts

@@ -1,4 +1,2 @@
-import './spinner-button-element';
-
 export { default as SpinnerButton } from './spinner-button';
 export type { SpinnerButtonRefHandle } from './spinner-button';

app/javascript/packages/step-indicator/README.md

@@ -6,10 +6,10 @@ Custom element and React implementation for a step indicator UI component.
 
 ### Custom Element
 
-Importing the package will register the `<lg-step-indicator>` custom element:
+Importing the element will register the `<lg-step-indicator>` custom element:
 
 ```ts
-import '@18f/identity-step-indicator';
+import '@18f/identity-step-indicator/step-indicator-element';
 ```
 
 The custom element will implement the small viewport scroll behavior, but all markup must already exist, rendered server-side or by the included React component.

app/javascript/packages/step-indicator/index.ts

@@ -1,4 +1,2 @@
-import './step-indicator-element';
-
 export { default as StepIndicator } from './step-indicator';
 export { default as StepIndicatorStep, StepStatus } from './step-indicator-step';

app/javascript/packages/validated-field/index.ts

@@ -1,5 +1,3 @@
-import './validated-field-element';
-
 export { default as ValidatedField } from './validated-field';
 
 export type { ValidatedFieldValidator } from './validated-field';

app/javascript/packs/step-indicator.js

@@ -1 +1 @@
-import '@18f/identity-step-indicator';
+import '@18f/identity-step-indicator/step-indicator-element';