Import of all inflight work in 'dev' branch.

.eslintrc.json

@@ -21,10 +21,6 @@
       "error",
       2
     ],
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
     "quotes": [
       "error",
       "single"

ATOMIC-UI-JS.md

@@ -15,7 +15,7 @@ An atomic, CSS first, user interface library.
 - [ ] `.x-input`
 - [ ] `.x-mds-icon`
 - [ ] `.x-menu`
-- [x] `.x-radio`
+- [x] `.x-radio` - Available also via `.x-input`.
 - [ ] `.x-section`
 - [ ] `.x-select`
 - [ ] `.x-table`

apps/atomic-ui-js-site/src/app/css-components/button/page.tsx

@@ -18,6 +18,26 @@ export default function ButtonPage() {
       <header>
         <h2>Button</h2>
       </header>
+
+      <div className="x-section-body">
+        <dl>
+          <dt>Button Sizes</dt>
+          <dd className="x-btn-group">
+            <button className="x-btn x-theme-primary x-outlined" type="button">
+              <XRippleComponent></XRippleComponent>
+              <span>Default</span>
+            </button>
+            {Object.keys(sizeVariants).map(k3 => k3 === 'Normal' ? null :
+              <button key={`sized-button-${k3}`}
+                className={`x-btn x-${sizeVariants[k3]} x-theme-primary x-outlined`}
+                type="button">
+                <XRippleComponent></XRippleComponent>
+                <span>{k3}</span>
+              </button>)}
+          </dd>
+        </dl>
+      </div>
+
       <div className="x-section-body">
         <h3>Button Varieties</h3>
 

apps/atomic-ui-js-site/src/app/custom-elements/x-input/alignment/page.module.scss

@@ -0,0 +1,3 @@
+.fieldset {
+  gap: 1rem;
+}

apps/atomic-ui-js-site/src/app/custom-elements/x-input/alignment/page.tsx

@@ -0,0 +1,36 @@
+import {inputTypes} from '@/data/controls-metadata';
+
+let _uuid = 0;
+
+export default function XInputAlignmentPage() {
+  return <section>
+    <header>
+      <h2>Input Controls Alignment</h2>
+    </header>
+    <article>
+      <form action="#">
+        <fieldset className={'x-flex x-flex-row-wrap gap-16px'}>
+          <legend>Horizontal alignment</legend>
+
+          {inputTypes.map((inputType) => {
+            const id = `example-${_uuid++}-${inputType}`;
+            const isButton = /reset|submit|button$/i.test(inputType);
+
+            if (inputType === 'hidden') return;
+
+            return <>
+              {!isButton ? <label htmlFor={id}>{inputType}:</label> : null}
+              <input
+                type={inputType}
+                className={`${inputType === 'button' ? 'x-btn x-primary x-filled' : ''}`}
+                defaultValue={isButton ? inputType[0].toUpperCase() + inputType.slice(1) : ''}
+                name={`example-${_uuid}-${inputType}`}
+                id={id}
+              />
+            </>;
+          })}
+        </fieldset>
+      </form>
+    </article>
+  </section>;
+}

apps/atomic-ui-js-site/src/app/components/input/page.tsx → apps/atomic-ui-js-site/src/app/custom-elements/x-input/page.tsx

@@ -1,70 +1,45 @@
 import styles from './page.module.css';
+import {inputTypes} from '@/data/controls-metadata';
 
-export default function InputPage() {
+let _uuid = Number.MIN_SAFE_INTEGER;
 
-  // All HTMLInputElement types
-  // ----
-  const inputTypes = [
-      'button',
-      'checkbox',
-      'color',
-      'date',
-      'datetime-local',
-      'email',
-      'file',
-      'hidden',
-      'image',
-      'month',
-      'number',
-      'password',
-      'radio',
-      'range',
-      'reset',
-      'search',
-      'submit',
-      'tel',
-      'text',
-      'time',
-      'url',
-      'week'
-    ],
-
-    elementsConfig = inputTypes.map(type => {
-      let options = null;
-
-      switch (type) {
-      case 'button':
-      case 'image':
-      case 'submit':
-      case 'reset':
-        return [type, {value: type[0].toUpperCase() + type.substring(1)}];
-      case 'hidden':
-        break;
-      case 'date':
-        options = {showReadonly: true, readonly2Value: '2023-05-01'};
-        break;
-      case 'datetime-local':
-        options = {showReadonly: true, readonly2Value: '2023-05-10T11:59'};
-        break;
-      case 'time':
-        options = {showReadonly: true, readonly2Value: '11:59'};
-        break;
-      case 'number':
-        options = {showReadonly: true, readonly2Value: '1000'};
-        break;
-      case 'email':
-        options = {showReadonly: true, readonly2Value: 'hello@hello.com'};
-        break;
-      case 'file':
-        options = {showReadonly: true};
-        break;
-      default:
-        options = {showReadonly: true, readonly2Value: 'Readonly'};
-        break;
-      }
-
-      return [type, options];
-    });
+export default function InputPage() {
+  const elementsConfig = inputTypes.map(type => {
+    let options = null;
+
+    switch (type) {
+    case 'button':
+    case 'image':
+    case 'submit':
+    case 'reset':
+      return [type, {value: type[0].toUpperCase() + type.substring(1)}];
+    case 'hidden':
+      break;
+    case 'date':
+      options = {showReadonly: true, readonly2Value: '2023-05-01'};
+      break;
+    case 'datetime-local':
+      options = {showReadonly: true, readonly2Value: '2023-05-10T11:59'};
+      break;
+    case 'time':
+      options = {showReadonly: true, readonly2Value: '11:59'};
+      break;
+    case 'number':
+      options = {showReadonly: true, readonly2Value: '1000'};
+      break;
+    case 'email':
+      options = {showReadonly: true, readonly2Value: 'hello@hello.com'};
+      break;
+    case 'file':
+      options = {showReadonly: true};
+      break;
+    default:
+      options = {showReadonly: true, readonly2Value: 'Readonly'};
+      break;
+    }
+
+    return [type, options];
+  });
 
   return <section className="x-flex x-flex-row-wrap">
     <article className={styles['article']}>
@@ -193,5 +168,35 @@ export default function InputPage() {
         </fieldset>
       </form>
     </article>
+
+    <article>
+      <header>
+        <h3>Input Controls Alignment</h3>
+      </header>
+
+      <form action="#">
+        <fieldset className={`${styles.fieldset} x-flex x-flex-row-wrap`}>
+          <legend>Horizontal alignment</legend>
+
+          {inputTypes.map((inputType) => {
+            const id = `example-${_uuid++}-${inputType}`;
+            const isButton = /reset|submit|button$/i.test(inputType);
+
+            if (inputType === 'hidden') return;
+
+            return <>
+              {!isButton ? <label htmlFor={id}>{inputType}:</label> : null}
+              <input
+                type={inputType}
+                className={`${inputType === 'button' ? 'x-btn x-primary x-filled' : ''}`}
+                defaultValue={isButton ? inputType[0].toUpperCase() + inputType.slice(1) : ''}
+                name={`example-${_uuid}-${inputType}`}
+                id={id}
+              />
+            </>;
+          })}
+        </fieldset>
+      </form>
+    </article>
   </section>;
 }

apps/atomic-ui-js-site/src/app/layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '../css/index.scss';
-import {AppNav} from '../features/app-nav';
+import {AppNav} from '@/features/app-nav';
 import {AppNavToggle} from '@/components/app-nav-toggle';
 
 export const metadata = {

apps/atomic-ui-js-site/src/app/other/size-reference/page.tsx

@@ -0,0 +1,62 @@
+import {factorsOf, multiplesOf, commonFactorsOf, fib} from 'atomic-ui-js/utils/number.js';
+
+export default function Page() {
+  const factorsOf144 = factorsOf(144),
+    multiplesOf4 = multiplesOf(4, Math.round(144 / 4)),
+    multiplesOf6 = multiplesOf(6, Math.round(144 / 6)),
+    multiplesOf8 = multiplesOf(8, Math.round(144 / 8)),
+    fib144 = fib(144),
+    commonNumbers = (() => {
+      const counts = []
+        .concat(factorsOf144, multiplesOf4, multiplesOf6, multiplesOf8, fib144)
+        .reduce((acc, curr) => {
+          if (acc[curr]) acc[curr] += 1;
+          else acc[curr] = 1;
+          return acc;
+        }, {} as Record<number, number>)
+      ;
+      return Object.keys(counts).reduce((acc, curr) => {
+        if (counts[curr] > 1) acc.push(parseInt(curr, 10));
+        return acc;
+      }, [] as number[])
+        .sort((a, b) => a - b);
+    })(),
+    commonNumberFactors = commonFactorsOf(...new Set(commonNumbers));
+
+  return (
+    <section>
+      <header>
+        <h3>
+          Size values in library
+        </h3>
+      </header>
+      <article>
+        <p>Note: The values here are all tentative (except the &ldquo;common&rdquo; set, below).</p>
+        <dl>
+          <dt>Factors of 144</dt>
+          <dd>{factorsOf144.join(', ')}</dd>
+          {([
+            [4, multiplesOf4],
+            [6, multiplesOf6],
+            [8, multiplesOf8]
+          ] as [number, number[]][]
+          ).flatMap(([x, set], i) => <>
+            <dt key={`dt-${x}-${i}`}>Multiples of {x} (up to 144)</dt>
+            <dd key={`dt-${x}-${i}-2`}>
+              {set.join(', ')}
+            </dd>
+          </>)
+          }
+          <dt>Fibonacci (up to 144)</dt>
+          <dd>{fib144.join(', ')}</dd>
+          <dt>Common (from above)</dt>
+          <dd>
+            <span>{commonNumbers.join(', ')}</span>
+            <p>Strive to use this set aside from other numbers as the values here
+            will pair up well with each other due to them having the common factors {commonNumberFactors.join(', ')}.</p>
+          </dd>
+        </dl>
+      </article>
+    </section>
+  );
+}

apps/atomic-ui-js-site/src/data/controls-metadata.ts

@@ -0,0 +1,31 @@
+export const
+
+  /**
+   * All HTMLInputElement type names.
+   *
+   * @type {string[]}
+   */
+  inputTypes = [
+    'button',
+    'checkbox',
+    'color',
+    'date',
+    'datetime-local',
+    'email',
+    'file',
+    'hidden',
+    'image',
+    'month',
+    'number',
+    'password',
+    'radio',
+    'range',
+    'reset',
+    'search',
+    'submit',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week'
+  ];