@olives/devos 2.1.0

package/.agents/skills/modern-web-guidance/guides/forms/brand-consistent-forms.md

@@ -0,0 +1,255 @@
+# Brand-Consistent Forms
+
+Customizing standard HTML form elements like checkboxes and radio buttons has historically been difficult. Developers often faced a choice between using the browser defaults or building custom components from scratch. Building custom controls is time-consuming and can easily lead to accessibility issues or missing states (like the indeterminate state for checkboxes).
+
+The CSS property `accent-color` provides a simple way to bring your brand color to built-in HTML form inputs with a single line of CSS, without sacrificing accessibility or built-in browser features.
+
+## How to Implement
+
+To apply your brand color to form controls:
+
+1. **Identify your brand color:** Choose a color that represents your brand.
+2. **Apply the `accent-color` property:** Add `accent-color` to the element or a container element (like `body` or a specific form) in your CSS.
+3. **Support Dark Mode (Optional but Recommended):** Use `color-scheme` to let the browser know your site supports dark mode, and adjust the `accent-color` if necessary for better contrast.
+
+## Example Code: Brand-Consistent Form Controls
+
+```css
+:root {
+  --brand-color: #6200ee;
+}
+
+/* Apply accent-color to the body or a specific container */
+body {
+  accent-color: var(--brand-color);
+}
+
+/* Optional: Adjust for dark mode if needed */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --brand-color: #bb86fc; /* A lighter shade for dark mode */
+  }
+}
+```
+
+```html
+<form>
+  <!-- Checkbox -->
+  <label for="subscribe">
+    <input type="checkbox" id="subscribe" checked>
+    Subscribe to newsletter
+  </label>
+
+  <!-- Radio Buttons -->
+  <label for="plan-monthly">
+    <input type="radio" id="plan-monthly" name="plan" value="monthly">
+    Monthly
+  </label>
+  <label for="plan-yearly">
+    <input type="radio" id="plan-yearly" name="plan" value="yearly" checked>
+    Yearly
+  </label>
+
+  <!-- Range Slider -->
+  <label for="volume">Volume:</label>
+  <input type="range" id="volume" min="0" max="100" value="70">
+
+  <!-- Progress Bar -->
+  <label for="file">Upload Progress:</label>
+  <progress id="file" max="100" value="70">70%</progress>
+</form>
+```
+
+## Strategic Implementation & Best Practices
+
+- **DO** use `accent-color` to easily theme form controls to match your brand.
+- **DO NOT** blindly trust the browser to handle contrast. While browsers are supposed to automatically determine an eligible contrast color, known bugs in implementations like **Safari** (WebKit bug 244233) and **Android Chrome** (Chromium bug 343503163) can fail to invert checkmark colors, leading to invisible or hard-to-see controls when using colors that lack sufficient contrast against the background (e.g., light colors in light mode, or dark colors in dark mode).
+- **DO** combine `accent-color` with `color-scheme: light dark` to ensure form controls look good in both light and dark themes.
+- **DO NOT** use a color that is too close to the background color, even though browsers try to guarantee contrast, it's best to provide a color with good base contrast.
+- **DO NOT** assume `accent-color` works on all form elements. Currently, it only tints `checkbox`, `radio`, `range`, and `progress` elements.
+
+## Fallback Strategy
+
+accent-color has limited availability.
+Supported by: Chrome 93 (Aug 2021), Edge 93 (Sep 2021), Firefox 92 (Sep 2021), and Safari 26.2 (Dec 2025).
+
+For browsers that do not support `accent-color`, the form controls fall back to the browser's default appearance. To ensure full brand consistency and high reliability across all environments, you MUST implement a custom fallback strategy using the established "visually hidden input" technique.
+
+### Progressive Enhancement with `@supports not`
+
+You MUST use the `@supports not` rule to apply custom fallback styles only when `accent-color` is not supported. This ensures you leverage the simplicity of `accent-color` for modern browsers while guaranteeing a consistent branded experience for older ones.
+
+#### 1. HTML Structure
+Ensure your labels wrap the text in a `<span>` to allow for sibling selectors in CSS:
+```html
+<label for="subscribe-fallback">
+  <input type="checkbox" id="subscribe-fallback" class="visually-hidden" checked>
+  <span>Subscribe to newsletter</span>
+</label>
+```
+
+#### 2. CSS Fallback
+Apply custom styles within a `@supports not` block:
+```css
+/* Fallback for older browsers without accent-color */
+@supports not (accent-color: var(--brand-color)) {
+  /* Visually hide the native input using the canonical accessible recipe */
+  form input[type="checkbox"].visually-hidden {
+    position: absolute !important;
+    clip-path: inset(50%) !important;
+    overflow: hidden !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    white-space: nowrap !important;
+  }
+
+  /* Style the wrapper label */
+  label {
+    position: relative;
+    padding-left: 2rem;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* Custom box for checkbox */
+  input[type="checkbox"] + span::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1.2rem;
+    height: 1.2rem;
+    border: 2px solid #ccc;
+    background: white;
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+  }
+
+  /* Ensure custom checkbox shows focus for keyboard users */
+  input[type="checkbox"]:focus-visible + span::before {
+    outline: 2px solid #000;
+    outline-offset: 2px;
+  }
+
+  /* Checked State */
+  input[type="checkbox"]:checked + span::before {
+    background-color: var(--brand-color, #6200ee);
+    border-color: var(--brand-color, #6200ee);
+  }
+
+  /* Checkmark (Unicode) */
+  input[type="checkbox"]:checked + span::after {
+    content: "✓";
+    position: absolute;
+    left: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: white;
+    font-weight: bold;
+    font-size: 0.9rem;
+  }
+
+  /* Fallback for Range Slider */
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+  }
+
+  /* Webkit (Chrome, Safari, Edge) */
+  input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    /* Use gradient to show progress for a static value (e.g., 70%) or update with JS */
+    background: linear-gradient(to right, var(--brand-color, #6200ee) 70%, #ccc 70%);
+    border-radius: 4px;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--brand-color, #6200ee);
+    cursor: pointer;
+    margin-top: -4px; /* Center vertically */
+  }
+
+  /* Firefox */
+  input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 8px;
+    background: #ccc;
+    border-radius: 4px;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--brand-color, #6200ee);
+    cursor: pointer;
+  }
+
+  /* Firefox specific progress bar */
+  input[type="range"]::-moz-range-progress {
+    background-color: var(--brand-color, #6200ee);
+    height: 8px;
+    border-radius: 4px;
+  }
+
+  /* Fallback for Progress Bar */
+  progress {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    background: #ccc;
+    height: 8px;
+    border-radius: 4px;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: #ccc;
+    border-radius: 4px;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: var(--brand-color, #6200ee);
+    border-radius: 4px;
+  }
+
+  progress::-moz-progress-bar {
+    background-color: var(--brand-color, #6200ee);
+    border-radius: 4px;
+  }
+}
+```
+
+### Dynamic Range Progress in Webkit Fallback
+
+To make the progress fill move with the thumb on a range slider in Webkit browsers (without `accent-color`), you can use a CSS variable and a small amount of JavaScript.
+
+1. **Update CSS**: Use a CSS variable for the gradient stop:
+```css
+input[type="range"]::-webkit-slider-runnable-track {
+  background: linear-gradient(to right, var(--brand-color) var(--progress, 0%), #ccc var(--progress, 0%));
+}
+```
+
+2. **Add JavaScript**: Update the variable on the `input` event:
+```javascript
+if (!CSS.supports('accent-color')) {
+  const slider = document.getElementById('volume');
+  slider.addEventListener('input', (e) => {
+    e.target.style.setProperty('--progress', `${e.target.value}%`);
+  });
+}
+```

package/.agents/skills/modern-web-guidance/guides/forms/branded-select-styling.md

@@ -0,0 +1,114 @@
+# Branded Select Styling
+
+The customizable select API offers a declarative, CSS-driven way to style `<select>` elements to perfectly match your brand's design system. By opting into `appearance: base-select`, you gain access to the internal shadow DOM of the select element, allowing you to style the button, the options picker list, the arrow icon, and the checkmark indicator using standard CSS properties.
+
+Previously, achieving a fully branded select required rebuilding the control from scratch with JavaScript, which often broke accessibility, keyboard navigation, and native form integration. With `appearance: base-select`, you get a custom look while the browser handles focus management, top-layer rendering, and accessibility bindings.
+
+## How to Implement
+
+To implement branded select styling:
+
+1. **Opt-in to customization:** Apply `appearance: base-select` to both the `<select>` element and the `::picker(select)` pseudo-element (which targets the drop-down list of options).
+2. **Structure the custom button (Optional):** Define a `<button>` element directly inside the `<select>` to replace the default trigger. Use the `<selectedcontent>` element inside this button to represent the text or content of the currently selected option.
+3. **Style the Picker List:** Use the `::picker(select)` pseudo-element to apply typography, background colors, borders, and shadows to the dropdown list. The browser renders this in the top-layer, making `z-index` conflicts a thing of the past.
+4. **Style Internal Icons:**
+   - Use `select::picker-icon` to style or replace the arrow icon.
+   - Use `option::checkmark` to style the checkmark indicator next to the active option.
+5. **Style Options:** Apply styles to `<option>` elements for hover states, padding, and layout.
+
+## Example Code: Branded Courier Select
+
+The following example demonstrates a custom select styled with a monospace font and dashed borders to match a specific "parcel" brand aesthetic.
+
+```css
+/* Enable customization for the select and its picker */
+.brand-select,
+.brand-select::picker(select) {
+  appearance: base-select;
+}
+
+/* Style the visible trigger button */
+.brand-select {
+  font-family: 'Courier New', monospace;
+  background-color: #fffaf0;
+  color: #8b4513;
+  border: 2px dashed #8b4513;
+  border-radius: 4px;
+  padding: 0.75rem;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+/* Style the dropdown options list */
+.brand-select::picker(select) {
+  font-family: 'Courier New', monospace;
+  background-color: #fffaf0;
+  border: 2px dashed #8b4513;
+  border-radius: 4px;
+  padding: 0.5rem;
+}
+
+/* Customize internal part colors to match text */
+.brand-select::picker-icon {
+  color: #8b4513;
+}
+
+.brand-select option::checkmark {
+  color: #8b4513;
+}
+
+/* Style individual options and hover effects */
+.brand-select option {
+  padding: 0.5rem;
+  border-radius: 4px;
+  color: #8b4513;
+  cursor: pointer;
+}
+
+.brand-select option:hover {
+  background-color: #fdf5e6;
+}
+```
+
+```html
+<label for="preferences">Select shipping preference</label>
+<select class="brand-select" id="preferences" name="preferences">
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
+  <option value="standard">Standard Shipping</option>
+  <option value="express" selected>Express Shipping</option>
+  <option value="overnight">Overnight Delivery</option>
+</select>
+```
+
+## Strategic Implementation & Best Practices
+
+- **DO** use `appearance: base-select` when your design system requires high-fidelity, visual consistency across all form controls that cannot be achieved with standard cross-browser select overrides.
+- **DO NOT** use this if you rely on the operating system's native picker experience (e.g., the standard scroll wheel picker on iOS devices). Opting into `base-select` opts out of native mobile UI controls in favor of web-rendered top-layer menus.
+- **DO** verify that color contrast meets WCAG standards. The customizable picker allows you to set ad-hoc colors, but you are responsible for ensuring text remains legible against custom backgrounds.
+- **DO** test layout behavior. Setting `appearance: base-select` removes the default browser behavior of sizing the select based on its longest option width. You may need to set a fixed width or use flex/grid constraints to prevent layout shifts.
+- **DO** ensure your `<select>` has a `name` attribute and an associated `<label>`. This ensures that even with a custom UI, the component remains accessible to screen readers and works correctly with standard form submissions.
+
+## Fallback strategies
+
+### Fallbacks & browser support for Customizable <select>
+
+Customizable <select> has limited availability.
+Supported by: Chrome 135 (Apr 2025) and Edge 135 (Apr 2025).
+Unsupported in: Firefox and Safari.
+
+For browsers that do not yet support `appearance: base-select`, the `<select>` element degrades gracefully to a standard operating system dropdown.
+
+- **Non-Text Content Ignored**: Older browsers strip HTML tags (like `<svg>` or `<div>`) inside `<option>` tags and render only the text nodes. Ensure the text content of the `<option>` is readable and meaningful on its own.
+- **HTML Structure Handling**: Standard parsers may ignore the `<button>` and `<selectedcontent>` tags inside `<select>` or treat them as invalid. No heavy JavaScript polyfills are strictly required for progressive enhancement if you view standard text as a readable fallback.
+
+
+```javascript
+document.addEventListener("DOMContentLoaded", () => {
+  // Check if browser supports base-select value
+  if (!CSS.supports("appearance", "base-select")) {
+    // Custom select overrides are not supported natively.
+  }
+});
+```

package/.agents/skills/modern-web-guidance/guides/forms/custom-select-picker-layouts.md

@@ -0,0 +1,103 @@
+# Custom Select Picker Layouts
+
+"Custom Select Picker Layouts" allow developers to break away from the traditional vertical list of options in a `<select>` dropdown. Using `appearance: base-select` and the `::picker(select)` pseudo-element, you can style the options list using modern CSS layout techniques like Grid or Flexbox. This is ideal for color pickers, emoji selectors, or product variants where a visual menu is more effective than a list.
+
+The CSS property `appearance: base-select` unlocks the ability to style the internal parts of a `<select>` element. By targeting `select::picker(select)`, you can apply `display: grid` and position options in columns, creating a rich visual experience without custom JavaScript.
+
+## How to Implement
+
+To implement a custom select picker layout:
+
+1. **Activate Base Styling:** Apply `appearance: base-select` to both the `<select>` element and its internal picker pseudo-element `select::picker(select)`.
+2. **Style the Picker Container:** Target `select::picker(select)` and apply `display: grid` (or `display: flex`). Define columns and gaps as you would for any container.
+3. **Style Options:** Target the `<option>` elements to style them as grid items or cards. You can add images, SVGs, or complex layouts inside them.
+4. **Customize the Trigger (Optional):** Use `<selectedcontent>` inside a `<button>` to render rich content for the selected value.
+
+## Example Code: Custom Grid Picker
+
+```html
+<label for="weather-picker">Select weather</label>
+<select class="grid-picker" name="weather" id="weather-picker">
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
+  <option value="sunny">
+    <span class="icon">☀️</span>
+    <span class="label">Sunny</span>
+  </option>
+  <option value="cloudy">
+    <span class="icon">☁️</span>
+    <span class="label">Cloudy</span>
+  </option>
+  <!-- More options... -->
+</select>
+```
+
+```css
+/* Activate the customizable select state */
+.grid-picker,
+.grid-picker::picker(select) {
+  appearance: base-select;
+}
+
+/* Style the dropdown list as a grid */
+.grid-picker::picker(select) {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns */
+  gap: 10px;
+  padding: 15px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+}
+
+/* Style options as grid cards */
+.grid-picker option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 15px;
+  border: 1px solid #eee;
+  border-radius: 6px;
+}
+
+/* MANDATORY: Use multiple visual indicators (distinct border thickness, background shift, and font weight) for the checked state to avoid color-only state communication */
+.grid-picker option:checked {
+  border: 2px solid #007bff;
+  background-color: #f0f7ff;
+  font-weight: 700;
+}
+```
+
+## Strategic Implementation & Best Practices
+
+- **DO** use `appearance: base-select` when you need to change the visual layout of options from a standard list to a 2D grid or custom flex flow.
+- **DO NOT** assume the styles apply to all browsers equally yet; verify support and provide a fallback.
+- **MANDATORY Accessibility Routing**: A native `<select>` element enforces one-dimensional linear arrow-key navigation (Up/Down). Arranging options in a 2D visual grid creates a spatial mismatch where pressing Left/Right arrows does not move focus horizontally between adjacent columns. If true two-dimensional keyboard navigation is essential for usability, do not use a native `<select>`; implement a custom ARIA `role="listbox"` composite widget with manual JavaScript matrix-based arrow key navigation instead.
+- **DO** use `<selectedcontent>` if you want the trigger button to show images or icons from the selected option automatically.
+- **DO** use standard `value` attributes on options to ensure form submission works exactly as before.
+- **DO** ensure your `<select>` has a `name` attribute and an associated `<label>`. This ensures that even with a custom UI, the component remains accessible to screen readers and works correctly with standard form submissions.
+
+## Fallback Strategy
+
+### Fallbacks & browser support for Customizable <select>
+
+Customizable <select> has limited availability.
+Supported by: Chrome 135 (Apr 2025) and Edge 135 (Apr 2025).
+Unsupported in: Firefox and Safari.
+
+For browsers that do not yet support `appearance: base-select`, the `<select>` element degrades gracefully to a standard operating system dropdown.
+
+- **Non-Text Content Ignored**: Older browsers strip HTML tags (like `<svg>` or `<div>`) inside `<option>` tags and render only the text nodes. Ensure the text content of the `<option>` is readable and meaningful on its own.
+- **HTML Structure Handling**: Standard parsers may ignore the `<button>` and `<selectedcontent>` tags inside `<select>` or treat them as invalid. No heavy JavaScript polyfills are strictly required for progressive enhancement if you view standard text as a readable fallback.
+
+
+```javascript
+document.addEventListener("DOMContentLoaded", () => {
+  // Check if browser supports base-select value
+  if (!CSS.supports("appearance", "base-select")) {
+    // Custom select overrides are not supported natively.
+  }
+});
+```

package/.agents/skills/modern-web-guidance/guides/forms/form-fields-automatically-fit-contents.md

@@ -0,0 +1,121 @@
+By default, form controls like `<input>`, `<textarea>`, and `<select>` have fixed dimensions. Their sizes remain constant, regardless of the amount of content the user enters or selects.
+
+To allow these controls to automatically shrink or grow to fit their content (including placeholders), use the `field-sizing: content` CSS property.
+
+### Auto-sizing form controls
+
+Setting `field-sizing: content` on inputs, selects, or textareas allows them to resize dynamically as the user types or selects options. However, you must account for inherited styling, layout defaults, and minimum/maximum constraints to ensure a robust user experience.
+
+To prevent layout issues, it is recommended to set both `min-inline-size` (or `min-width`) and `max-inline-size` (or `max-width`) alongside `field-sizing: content` on text inputs. A minimum size prevents the input from collapsing to a width of zero when empty (making it unclickable), and a maximum size ensures it doesn't expand indefinitely and break the page layout.
+
+For textareas, allowing horizontal auto-sizing can cause a jarring UX (e.g., a textarea with a long placeholder will abruptly shrink horizontally when the user types a single character). To prevent this, apply an explicit width (like `width: 100%`) to the textarea. This forces the textarea to maintain a stable horizontal width while still auto-sizing vertically as content wraps.
+
+It is recommended to set a `max-inline-size` (or `max-width`) on `<select>` elements using `field-sizing: content` to ensure that extremely long selected options do not break the page layout.
+
+```css
+/* Applies horizontal auto-sizing to inputs */
+input {
+  /* Instructs the element to size itself to fit its content */
+  field-sizing: content;
+
+  /* Reset explicit width if inherited from global styles */
+  width: auto;
+
+  /* Prevents the input from collapsing and disappearing when empty */
+  min-inline-size: 15ch;
+
+  /* Prevents infinite horizontal growth */
+  max-inline-size: 50ch;
+}
+
+textarea {
+  /* Instructs the element to size itself to fit its content */
+  field-sizing: content;
+
+  /* Reset explicit height if inherited from global styles */
+  height: auto;
+
+  /* Use a fixed width to prevent jarring horizontal shifts when replacing a long placeholder */
+  width: 50ch; /* or 100% depending on your layout */
+
+  /* Sets a reasonable minimum height (e.g., 3 lines) for empty textareas */
+  min-block-size: 3lh;
+
+  /* Prevents infinite vertical growth. Once a textarea hits this */
+  /* height, it will stop growing and show a vertical scrollbar. */
+  max-block-size: 10lh;
+}
+
+select {
+  /* Sizes the select element to fit the active option only */
+  field-sizing: content;
+
+  /* Prevents the dropdown from expanding infinitely and breaking the layout */
+  max-inline-size: 50ch;
+}
+```
+
+IMPORTANT: Explicit `width` and `height` properties override `field-sizing: content` on all form controls. If your project's global CSS sets inputs, selects, or textareas to `width: 100%`, you must explicitly reset them to `width: auto` (or `width: fit-content`) on the elements using `field-sizing: content` for auto-sizing to work. Conversely, you should explicitly set `height: auto` on textareas if a fixed height was previously set globally.
+
+IMPORTANT: Grid and Flexbox layouts often implicitly stretch their children to fill available space. If any form control using `field-sizing: content` refuses to shrink, check its container's alignment properties and apply `align-self: start` or `justify-self: start` to the form control to override the stretching.
+
+### Fallback strategies
+
+field-sizing has limited availability.
+Supported by: Chrome 123 (Mar 2024), Edge 123 (Mar 2024), and Safari 26.2 (Dec 2025).
+Unsupported in: Firefox.
+
+`field-sizing` should be treated as a progressive enhancement. In browsers that do not support the property, form controls gracefully degrade back to their default, fixed sizing behavior. Users will simply experience standard scrolling for overflowing content inside fixed-size inputs and textareas.
+
+If dynamically growing fields are absolutely required for older browsers, you must use feature detection and a complex workaround. The most robust fallback for textareas uses a CSS Grid trick where a hidden pseudo-element mirrors the user's input in real-time, forcing the grid container (and the textarea inside it) to expand.
+
+```html
+<!-- The textarea is wrapped in a container that will mirror its value -->
+<div class="growable-textarea" data-replicated-value="">
+  <textarea></textarea>
+</div>
+```
+
+```javascript
+// Only attach the fallback event listeners if field-sizing is unsupported
+if (!CSS.supports('field-sizing', 'content')) {
+  document.querySelectorAll('.growable-textarea > textarea').forEach(textarea => {
+    textarea.addEventListener('input', () => {
+      textarea.parentNode.dataset.replicatedValue = textarea.value;
+    });
+  });
+}
+```
+
+```css
+/* Only apply the fallback if field-sizing is NOT supported */
+@supports not (field-sizing: content) {
+  .growable-textarea {
+    display: grid;
+  }
+
+  /* The pseudo-element and textarea must share the exact same cell, font, and padding */
+  .growable-textarea::after,
+  .growable-textarea > textarea {
+    grid-area: 1 / 1 / 2 / 2;
+    font: inherit;
+    padding: 0.5rem;
+    border: 1px solid #999;
+  }
+
+  /* The pseudo-element renders the copied text invisibly to stretch the grid */
+  .growable-textarea::after {
+    /* The space is necessary for trailing empty lines to be rendered */
+    content: attr(data-replicated-value) " ";
+    white-space: pre-wrap;
+    visibility: hidden;
+  }
+
+  .growable-textarea > textarea {
+    resize: none;
+    overflow: hidden;
+  }
+}
+```
+
+Given the complexity of duplicating styles and synchronizing state across DOM nodes for every form control, relying on the default fallback behavior of fixed inputs is the recommended approach for most applications unless dynamic sizing is critical to the user experience.