@exmg/exm-form 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# `<exm-button>` [![Published on npm](https://img.shields.io/npm/v/@exmg/exm-button.svg)](https://www.npmjs.com/package/@exmg/exm-button)
+
+# exm-form
+
+The Exmg Form enhances form design by offering a more intuitive layout visualization, streamlining the user experience with several key features. These include:
+
+- Automated form validity checks, ensuring data integrity.
+- Dynamic submit button control, which enables or disables the button based on form completeness.
+- JSON output capability, allowing for easy data serialization and integration.
+- A loading spinner, providing a visual indicator for asynchronous form submissions.
+
+## Installation
+
+```sh
+npm install @exmg/exm-form
+```
+
+## Example Usage
+
+### Text
+
+```html
+<exm-form class="has-aside" @dialog-submit="${doFormAction}">
+  <div slot="toolbar" class="toolbar"><div class="title">Create contact</div></div>
+  <form>
+    <div class="row">
+      <md-filled-text-field name="firstname" dialogFocus label="First Name" required></md-filled-text-field>
+      <md-filled-text-field name="lastname" label="Last Name" required></md-filled-text-field>
+    </div>
+    <div class="row">
+      <md-filled-text-field name="company" label="Company"></md-filled-text-field>
+      <md-filled-text-field name="amount" label="Amount" type="number" min="0" max="10"></md-filled-text-field>
+    </div>
+    <md-filled-text-field
+      name="email"
+      label="Email"
+      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$"
+      required
+    ></md-filled-text-field>
+    <md-filled-text-field name="phone" label="Phone" required></md-filled-text-field>
+  </form>
+  <div slot="aside">
+    Ex Machina will send notices about the Data <a href="#">Processing Terms</a> and EU General Data Protection
+    Regulation to your primary contact. If your organization has a data protection officer or an EU representative, add
+    their contact information.
+  </div>
+</exm-form>
+```
+
+```js
+   async function doFormAction(e: CustomEvent<unknown>) {
+    const formDialog = e.target as ExmgForm;
+    try {
+      formDialog.submitting = true;
+      // Do server call
+      // Show success message
+    } catch (error) {
+      console.error(error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      formDialog.submitting = false;
+    }
+  }
+```
+
+## API
+
+### Properties/Attributes
+
+| Name              | Type      | Default  | Description                                               |
+| ----------------- | --------- | -------- | --------------------------------------------------------- |
+| `submitBtn`       | `string`  | `Save`   | Submit button copy                                        |
+| `cancelBtn`       | `string`  | `Cancel` | Cancel button copy                                        |
+| `submitting`      | `boolean` | false    | Indicated form submit in progress and disables the button |
+| `hasAsideContent` | `boolean` | false    | Indicated if form has a side help section                 |
+
+For other options see the m3 docs:
+
+- [Material 3 Button Docs](https://github.com/material-components/material-web/blob/main/docs/components/button.md)
+
+## Additional references
+
+- [Demo / Docs](https://exmg.github.io/exmachina-web-components/demo/?el=exm-button)

package/index.d.ts

@@ -0,0 +1,4 @@
+export { ExmgForm } from './src/exm-form.js';
+export { ExmgFormBase, serializeForm } from './src/exm-form-base.js';
+export { style as exmgFormStyles } from './src/styles/exm-form-css.js';
+export { style as exmgFormBaseStyles } from './src/styles/exm-form-base-css.js';

package/index.js

@@ -0,0 +1,5 @@
+export { ExmgForm } from './src/exm-form.js';
+export { ExmgFormBase, serializeForm } from './src/exm-form-base.js';
+export { style as exmgFormStyles } from './src/styles/exm-form-css.js';
+export { style as exmgFormBaseStyles } from './src/styles/exm-form-base-css.js';
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@exmg/exm-form",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "index.js",
+  "module": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./exm-form.js": "./src/exm-form.js"
+  },
+  "description": "Form element",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "form"
+  ],
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:exmg/exm-web-components.git",
+    "directory": "packages/exm-form"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@exmg/exm-button": "^1.0.0",
+    "@material/typography": "^14.0.0",
+    "lit": "^3.0.0",
+    "tslib": "^2.6.2"
+  },
+  "devDependencies": {
+    "@exmg/lit-cli": "1.1.13"
+  },
+  "scripts": {
+    "build:styles": "exmg-lit-cli sass -f \"./**/*.scss\""
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "0907b55c89325d59902b98a64c352bf6e1fc81ff"
+}

package/src/exm-form-base.d.ts

@@ -0,0 +1,48 @@
+import '@exmg/exm-button/exm-text-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/divider/divider.js';
+import { ExmgElement } from '@exmg/lit-base';
+export declare const CLOSE_ACTION = "close";
+export declare const serializeForm: (form: any) => {};
+export declare class ExmgFormBase extends ExmgElement {
+    /**
+     * Submit button copy
+     */
+    submitBtn: string;
+    /**
+     * Cancel button copy
+     */
+    cancelBtn: string;
+    /**
+     * Internall used to show button spinner.
+     */
+    submitting: boolean;
+    formValid: boolean;
+    boundHandleBlur?: (e: Event) => void;
+    boundHandleKeyup?: (e: Event) => void;
+    hasAsideContent: boolean;
+    errorMessage?: string | null;
+    protected getForm(): HTMLFormElement | null;
+    reset(): void;
+    submit(): void;
+    protected _handleKeyup(): void;
+    protected _handleBlur(e: Event): void;
+    protected firstUpdated(): Promise<void>;
+    disconnectedCallback(): void;
+    protected _checkFormValidity(): void;
+    /**
+     * Action method that needs to be implemented
+     * @param {CustomEvent} e
+     */
+    doAction?(formData: unknown): Promise<void> | void;
+    protected handleSubmit(): Promise<void>;
+    showError(message: string): void;
+    protected renderToolbar(): import("lit-html").TemplateResult<1>;
+    protected renderFormContent(): import("lit-html").TemplateResult<1>;
+    protected renderAside(): import("lit-html").TemplateResult<1>;
+    handleAsideSlotChange(e: CustomEvent): void;
+    protected renderError(): import("lit-html").TemplateResult<1>;
+    protected renderActions(): import("lit-html").TemplateResult<1>;
+    protected renderContainer(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}

package/src/exm-form-base.js

@@ -0,0 +1,239 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import '@exmg/exm-button/exm-text-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/divider/divider.js';
+import { ExmgElement } from '@exmg/lit-base';
+import { classMap } from 'lit/directives/class-map.js';
+export const CLOSE_ACTION = 'close';
+export const serializeForm = (form) => {
+    const obj = {};
+    const formElements = form === null || form === void 0 ? void 0 : form.elements;
+    const formElementsArray = Array.from(formElements);
+    /**
+     * Create list of checkbox elements. If no value is set the return value of the checkbox for 'on' will be a boolean
+     */
+    const checkboxNames = formElementsArray
+        .filter((input) => {
+        return input.value === 'on' && (input.type === 'checkbox' || input.tagName.toLowerCase().includes('checkbox'));
+    })
+        .map((input) => input.name);
+    /* Same for the radio items */
+    const radioNames = formElementsArray
+        .filter((input) => {
+        return input.type === 'radio' || input.tagName.toLowerCase().includes('radio');
+    })
+        .map((input) => input.name);
+    const numberNames = formElementsArray
+        .filter((input) => {
+        return input.type === 'number';
+    })
+        .map((input) => input.name);
+    const formData = new FormData(form);
+    for (const pair of formData.entries()) {
+        const key = pair[0];
+        const val = pair[1];
+        if (Object.hasOwnProperty.call(obj, key)) {
+            if (!Array.isArray(obj[key])) {
+                obj[key] = [obj[key]];
+            }
+            obj[key].push(val);
+            continue;
+        }
+        if (numberNames.includes(key)) {
+            obj[key] = val ? parseFloat(`${val}`) : undefined;
+            continue;
+        }
+        // When set to on convert to boolean return value
+        // @ts-ignore
+        if (checkboxNames.includes(key)) {
+            obj[key] = val === 'on';
+            continue;
+        }
+        // Check for a default value of on for radio items to set to true, if not, set to the value
+        if (radioNames.includes(key)) {
+            if (val === 'on') {
+                obj[key] = val === 'on';
+            }
+            else {
+                obj[key] = val;
+            }
+            continue;
+        }
+        obj[key] = formData.get(key);
+    }
+    // All checkboxes that are not checked will not be included in the form data and need to return false
+    for (const name of checkboxNames) {
+        // check for
+        if (!Object.hasOwnProperty.call(obj, name)) {
+            obj[name] = false;
+        }
+    }
+    return obj;
+};
+export class ExmgFormBase extends ExmgElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Submit button copy
+         */
+        this.submitBtn = 'Save';
+        /**
+         * Cancel button copy
+         */
+        this.cancelBtn = 'Cancel';
+        /**
+         * Internall used to show button spinner.
+         */
+        this.submitting = false;
+        this.formValid = false;
+        this.hasAsideContent = false;
+    }
+    getForm() {
+        return this.shadowRoot.querySelector('form');
+    }
+    reset() {
+        const form = this.getForm();
+        form === null || form === void 0 ? void 0 : form.reset();
+    }
+    submit() {
+        this.handleSubmit();
+    }
+    _handleKeyup() {
+        this._checkFormValidity();
+    }
+    _handleBlur(e) {
+        // @ts-ignore
+        typeof e.target.reportValidity === 'function' && e.target.reportValidity();
+        this._checkFormValidity();
+    }
+    async firstUpdated() {
+        const form = this.getForm();
+        this.boundHandleBlur = this._handleBlur.bind(this);
+        form.addEventListener('blur', this.boundHandleBlur, true);
+        this.boundHandleKeyup = this._handleKeyup.bind(this);
+        form.addEventListener('keyup', this.boundHandleKeyup, true);
+        await this.updateComplete;
+        this._checkFormValidity();
+    }
+    disconnectedCallback() {
+        const form = this.getForm();
+        this.boundHandleBlur && form.removeEventListener('blur', this.boundHandleBlur, true);
+        this.boundHandleKeyup && form.removeEventListener('keyup', this.boundHandleKeyup, true);
+        super.disconnectedCallback();
+    }
+    _checkFormValidity() {
+        const form = this.getForm();
+        const formElements = form === null || form === void 0 ? void 0 : form.elements;
+        let allValid = true;
+        for (const el of formElements || []) {
+            // @ts-ignore
+            if (typeof el.reportValidity !== 'function')
+                continue;
+            // @ts-ignore
+            const isValid = el.checkValidity();
+            if (!isValid) {
+                allValid = false;
+            }
+        }
+        this.formValid = allValid;
+    }
+    async handleSubmit() {
+        this.errorMessage = null;
+        const form = this.getForm();
+        // Check form validity
+        this._checkFormValidity();
+        // Return when there are invalid fields
+        if (!this.formValid) {
+            return;
+        }
+        // Serialize form data
+        const data = serializeForm(form);
+        if (this.doAction) {
+            try {
+                this.submitting = true;
+                await this.doAction(data);
+            }
+            catch (error) {
+                this.showError(error instanceof Error ? error.message : 'Unknown error');
+                this.fire('form-error', { message: error instanceof Error ? error.message : 'Unknown error' }, true);
+            }
+            finally {
+                this.submitting = false;
+            }
+        }
+        else {
+            this.fire('form-submit', data, true);
+        }
+    }
+    showError(message) {
+        this.errorMessage = message;
+    }
+    renderToolbar() {
+        return html `<div class="toolbar-container"><slot name="toolbar"></slot></div>`;
+    }
+    renderFormContent() {
+        return html `<slot></slot>`;
+    }
+    renderAside() {
+        return html `<slot name="aside" @slotchange="${this.handleAsideSlotChange}"></slot>`;
+    }
+    handleAsideSlotChange(e) {
+        const slot = e.target;
+        // @ts-ignore
+        const nodes = slot.assignedNodes({ flatten: true });
+        this.hasAsideContent = nodes.length > 0;
+    }
+    renderError() {
+        return html `<div class="form-error"><div>${this.errorMessage}</div></div>`;
+    }
+    renderActions() {
+        return html `
+      <div class="actions">
+        <md-text-button slot="footer" dialogFocus @click=${() => this.fire('form-cancel')}
+          >${this.cancelBtn}</md-text-button
+        >
+        <exm-text-button
+          slot="footer"
+          @click=${this.handleSubmit}
+          ?disabled=${this.submitting || !this.formValid}
+          ?loading=${this.submitting}
+          >${this.submitBtn}</exm-text-button
+        >
+      </div>
+    `;
+    }
+    renderContainer() {
+        return html ` <div class="container">
+      <div class="content">${this.renderFormContent()}</div>
+      <div class="aside ${classMap({ empty: !this.hasAsideContent })}">${this.renderAside()}</div>
+    </div>`;
+    }
+    render() {
+        return html `
+      ${this.renderToolbar()} ${this.errorMessage ? this.renderError() : nothing} ${this.renderContainer()}
+      <div class="divider"><md-divider></md-divider></div>
+      ${this.renderActions()}
+    `;
+    }
+}
+__decorate([
+    property({ type: String })
+], ExmgFormBase.prototype, "submitBtn", void 0);
+__decorate([
+    property({ type: String })
+], ExmgFormBase.prototype, "cancelBtn", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgFormBase.prototype, "submitting", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgFormBase.prototype, "formValid", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmgFormBase.prototype, "hasAsideContent", void 0);
+__decorate([
+    property({ type: String })
+], ExmgFormBase.prototype, "errorMessage", void 0);
+//# sourceMappingURL=exm-form-base.js.map

package/src/exm-form.d.ts

@@ -0,0 +1,10 @@
+import { ExmgFormBase } from './exm-form-base.js';
+export declare class ExmgForm extends ExmgFormBase {
+    static styles: import("lit").CSSResult[];
+    getForm(): HTMLFormElement | null;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-form': ExmgForm;
+    }
+}

package/src/exm-form.js

@@ -0,0 +1,15 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { style } from './styles/exm-form-base-css.js';
+import { ExmgFormBase } from './exm-form-base.js';
+let ExmgForm = class ExmgForm extends ExmgFormBase {
+    getForm() {
+        return this.querySelector('form');
+    }
+};
+ExmgForm.styles = [style];
+ExmgForm = __decorate([
+    customElement('exm-form')
+], ExmgForm);
+export { ExmgForm };
+//# sourceMappingURL=exm-form.js.map

package/src/styles/exm-form-base-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-form-base-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `:host{display:block;--_exm-form-content-margin-left: var(--exm-form-content-margin-left, 0);--_exm-form-container-margin-top: var(--exm-form-container-margin-top, 1rem);--_exm-form-container-margin-bottom: var(--exm-form-container-margin-bottom, 1rem);--_exm-form-divider-margin-top: var(--exm-form-divider-margin-top, 2rem);--_exm-form-aside-font-size: var(--exm-form-aside-font-size, 0.875rem);--_exm-form-aside-line-height: var(--exm-form-aside-line-height, 1.25rem);--_exm-form-aside-letter-spacing: var(--exm-form-aside-letter-spacing, 0.0142857143em);--_exm-form-aside-font-weight: var(--exm-form-aside-font-weight, 400);--_exm-form-aside-margin-left: var(--exm-form-aside-margin-left, 1rem);--_exm-form-aside-margin-right: var(--exm-form-aside-margin-right, 5rem);--_exm-form-aside-min-width: var(--exm-form-aside-min-width, 180px)}.aside{line-height:var(--_exm-form-aside-line-height);font-size:var(--_exm-form-aside-font-size);letter-spacing:var(--_exm-form-aside-letter-spacing);font-weight:var(--_exm-form-aside-font-weight);color:var(--_exm-form-aside-color, var(--md-sys-color-on-surface));border-left:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;margin-left:var(--_exm-form-aside-margin-left);margin-right:var(--_exm-form-aside-margin-right);min-height:2rem;padding-left:1rem;vertical-align:top;height:100%;min-width:var(--_exm-form-aside-min-width);flex:0}.aside.empty{display:none}.content,.container{display:flex}.content{flex:1}.container{margin-top:var(--_exm-form-container-margin-top);margin-bottom:var(--_exm-form-container-margin-bottom)}.actions{display:flex;padding:8px 4px;justify-content:flex-end}.actions>*{margin-right:8px}.divider{margin-top:var(--_exm-form-divider-margin-top)}.content{margin-left:var(--_exm-form-content-margin-left)}.form-error{background-color:var(--_exm-form-error-background, var(--md-sys-color-error-container, red));color:var(--_exm-form-error-color, var(--md-sys-color-on-error-container, white))}.form-error>div{padding:1rem}`;
+export default style;
+//# sourceMappingURL=exm-form-base-css.js.map

package/src/styles/exm-form-base.scss

@@ -0,0 +1,79 @@
+:host {
+  display: block;
+
+  --_exm-form-content-margin-left: var(--exm-form-content-margin-left, 0);
+  --_exm-form-container-margin-top: var(--exm-form-container-margin-top, 1rem);
+  --_exm-form-container-margin-bottom: var(--exm-form-container-margin-bottom, 1rem);
+  --_exm-form-divider-margin-top: var(--exm-form-divider-margin-top, 2rem);
+
+  // Aside
+  --_exm-form-aside-font-size: var(--exm-form-aside-font-size, 0.875rem);
+  --_exm-form-aside-line-height: var(--exm-form-aside-line-height, 1.25rem);
+  --_exm-form-aside-letter-spacing: var(--exm-form-aside-letter-spacing, 0.0142857143em);
+  --_exm-form-aside-font-weight: var(--exm-form-aside-font-weight, 400);
+  --_exm-form-aside-margin-left: var(--exm-form-aside-margin-left, 1rem);
+  --_exm-form-aside-margin-right: var(--exm-form-aside-margin-right, 5rem);
+  --_exm-form-aside-min-width: var(--exm-form-aside-min-width, 180px);
+}
+
+.aside {
+  line-height: var(--_exm-form-aside-line-height);
+  font-size: var(--_exm-form-aside-font-size);
+  letter-spacing: var(--_exm-form-aside-letter-spacing);
+  font-weight: var(--_exm-form-aside-font-weight);
+  color: var(--_exm-form-aside-color, var(--md-sys-color-on-surface));
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+  box-sizing: border-box;
+  margin-left: var(--_exm-form-aside-margin-left);
+  margin-right: var(--_exm-form-aside-margin-right);
+  min-height: 2rem;
+  padding-left: 1rem;
+  vertical-align: top;
+  height: 100%;
+  min-width: var(--_exm-form-aside-min-width);
+  flex: 0;
+}
+
+.aside.empty {
+  display: none;
+}
+
+.content,
+.container {
+  display: flex;
+}
+.content {
+  flex: 1;
+}
+
+.container {
+  margin-top: var(--_exm-form-container-margin-top);
+  margin-bottom: var(--_exm-form-container-margin-bottom);
+}
+
+.actions {
+  display: flex;
+  padding: 8px 4px;
+  justify-content: flex-end;
+}
+
+.actions > * {
+  margin-right: 8px;
+}
+
+.divider {
+  margin-top: var(--_exm-form-divider-margin-top);
+}
+
+.content {
+  margin-left: var(--_exm-form-content-margin-left);
+}
+
+.form-error {
+  background-color: var(--_exm-form-error-background, var(--md-sys-color-error-container, red));
+  color: var(--_exm-form-error-color, var(--md-sys-color-on-error-container, white));
+}
+
+.form-error > div {
+  padding: 1rem;
+}

package/src/styles/exm-form-css.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+export default style;

package/src/styles/exm-form-css.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+export const style = css `.section-title{line-height:1.5rem;font-size:1rem;letter-spacing:.00625em;font-weight:500;color:var(--_exm-form-title-color, var(--md-sys-color-on-surface));padding-bottom:8px}.aside{--_exm-form-aside-font-size: var(--exm-form-aside-font-size, 0.875rem);--_exm-form-aside-line-height: var(--exm-form-aside-line-height, 1.25rem);--_exm-form-aside-letter-spacing: var(--exm-form-aside-letter-spacing, 0.0142857143em);--_exm-form-aside-font-weight: var(--exm-form-aside-font-weight, 400);--_exm-form-aside-margin-left: var(--exm-form-aside-margin-left, 1rem);--_exm-form-aside-margin-right: var(--exm-form-aside-margin-right, 5rem);--_exm-form-aside-min-width: var(--exm-form-aside-min-width, 180px);line-height:var(--_exm-form-aside-line-height);font-size:var(--_exm-form-aside-font-size);letter-spacing:var(--_exm-form-aside-letter-spacing);font-weight:var(--_exm-form-aside-font-weight);color:var(--md-sys-color-on-surface);border-left:1px solid var(--md-sys-color-outline-variant);box-sizing:border-box;margin-left:var(--_exm-form-aside-margin-left);margin-right:var(--_exm-form-aside-margin-right);min-height:2rem;padding-left:1rem;vertical-align:top;height:100%;min-width:var(--_exm-form-aside-min-width);flex:0}form{margin:0 1rem;width:100%}form .row{display:flex;gap:6px;height:76px;align-items:flex-start}form .row>*{flex:1;height:fit-content}form{display:flex;flex-direction:column;gap:12px;margin-top:.5rem}form>*{display:contents}.actions>*{margin-right:8px}.no-flex{display:block}.extra-margin{margin-top:2rem;display:block}label.checkbox{display:flex;justify-content:flex-start;align-items:center;font-size:1rem;font-weight:500;margin:.5rem 1rem}label.checkbox md-checkbox{margin-right:1rem}.toolbar{display:flex;align-items:center;padding:8px 4px 8px 16px;height:56px;box-sizing:border-box}.toolbar .title{line-height:1.5rem;font-size:1rem;letter-spacing:.00625em;font-weight:500;color:var(--md-sys-color-on-surface);box-sizing:border-box;overflow-wrap:break-word}a{color:var(--md-sys-color-primary)}`;
+export default style;
+//# sourceMappingURL=exm-form-css.js.map

package/src/styles/exm-form.scss

@@ -0,0 +1,108 @@
+.section-title {
+  line-height: 1.5rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625em;
+  font-weight: 500;
+  color: var(--_exm-form-title-color, var(--md-sys-color-on-surface));
+  padding-bottom: 8px;
+}
+
+.aside {
+  --_exm-form-aside-font-size: var(--exm-form-aside-font-size, 0.875rem);
+  --_exm-form-aside-line-height: var(--exm-form-aside-line-height, 1.25rem);
+  --_exm-form-aside-letter-spacing: var(--exm-form-aside-letter-spacing, 0.0142857143em);
+  --_exm-form-aside-font-weight: var(--exm-form-aside-font-weight, 400);
+  --_exm-form-aside-margin-left: var(--exm-form-aside-margin-left, 1rem);
+  --_exm-form-aside-margin-right: var(--exm-form-aside-margin-right, 5rem);
+  --_exm-form-aside-min-width: var(--exm-form-aside-min-width, 180px);
+  line-height: var(--_exm-form-aside-line-height);
+  font-size: var(--_exm-form-aside-font-size);
+  letter-spacing: var(--_exm-form-aside-letter-spacing);
+  font-weight: var(--_exm-form-aside-font-weight);
+  color: var(--md-sys-color-on-surface);
+  border-left: 1px solid var(--md-sys-color-outline-variant);
+  box-sizing: border-box;
+  margin-left: var(--_exm-form-aside-margin-left);
+  margin-right: var(--_exm-form-aside-margin-right);
+  min-height: 2rem;
+  padding-left: 1rem;
+  vertical-align: top;
+  height: 100%;
+  min-width: var(--_exm-form-aside-min-width);
+  flex: 0;
+}
+
+form {
+  margin: 0 1rem;
+  width: 100%;
+}
+
+form .row {
+  display: flex;
+  gap: 6px;
+  height: 76px;
+  align-items: flex-start;
+}
+
+form .row > * {
+  flex: 1;
+  height: fit-content;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 0.5rem;
+}
+
+form > * {
+  display: contents;
+}
+
+.actions > * {
+  margin-right: 8px;
+}
+
+.no-flex {
+  display: block;
+}
+
+.extra-margin {
+  margin-top: 2rem;
+  display: block;
+}
+
+label.checkbox {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0.5rem 1rem;
+  md-checkbox {
+    margin-right: 1rem;
+  }
+}
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  padding: 8px 4px 8px 16px;
+  height: 56px;
+  box-sizing: border-box;
+}
+
+.toolbar .title {
+  line-height: 1.5rem;
+  font-size: 1rem;
+  letter-spacing: 0.00625em;
+  font-weight: 500;
+  color: var(--md-sys-color-on-surface);
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+}
+
+a {
+  color: var(--md-sys-color-primary);
+}