@rcarls/rc-field 0.0.0-next-20260921045401

package/CHANGELOG.md

@@ -0,0 +1,88 @@
+# @rcarls/rc-field
+
+## 0.0.0-next-20260921045401
+
+### Minor Changes
+
+- 079e025: Standardize component styling contracts for the breaking 0.7 release.
+
+  BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
+  `--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
+  `--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
+  `--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
+  `--rc-chip-group-webkit-scrollbar-display` to
+  `--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
+  Compatibility aliases are intentionally not provided.
+
+  BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
+  `--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
+  `*-padding-inline-end` tokens. Generated removable chips now reserve the full
+  remove target and its edge offset, so their indicator cannot overlap label text.
+
+  Add canonical app-bar elevation, transfer-list listbox radius, and textarea
+  line-action tokens. Add logical `rc-chip` inline-padding properties so themes
+  can implement Material's icon-aware spacing without overriding authored child
+  styles. Make `rc-field` consume the shared semantic token layer,
+  and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
+  `rc-base` cascade layer so normal consumer rules override them.
+
+  Prevent decorative, `aria-hidden` trailing list content from intercepting a
+  whole-row action target, and keep segmented-list item geometry from leaking
+  into nested standard lists.
+
+  Remove unused Material navigation-rail toggle tokens and obsolete list-item
+  theme tokens. Register the segmented-button private theme seam and enforce
+  token ownership, documentation, removed-name, selector-budget, and cascade
+  layer contracts through the component architecture audit.
+
+- 9ab269c: Support `<select>` as a field control, both as a plain direct child and wrapped by an
+  enhancing control provider (the same contract `rc-textarea` already uses). Populated state for
+  a multiple select comes from `selectedOptions` rather than `.value`, which only reflects the
+  first selected option in tree order and can read empty even with a real selection.
+- e23a39c: Add an accessible native input and textarea field wrapper with Material 3 filled and outlined
+  theme treatments, including an explicit provider contract for enhanced native controls.
+
+### Patch Changes
+
+- 011f3c6: Keep combobox chips clear of their trailing toggle, reset native selects inside
+  `rc-field`, keep controlled carousel accessibility state synchronized, and align
+  Material chips, menus, lists, disclosures, nested editors, and bottom-sheet
+  motion with their MD3 defaults.
+- c5b62c9: Fix an empty `leading`/`trailing`/`prefix`/`suffix` slot silently keeping its layout box (and any
+  margin meant for the non-empty case), eating into the control's available width. The `.empty-slot`
+  class could never win against the id-selector rule setting its `display`, regardless of source
+  order.
+- f4c0244: Prefer a control provider's own `disabled` property over its raw native control when both are
+  present. A provider disabling its control for an internal reason unrelated to the field's real
+  enabled/disabled intent (confirmed with `rc-select`'s GeckoView picker guard) no longer leaks
+  into `data-disabled` and the field's dimmed styling.
+- f6eea6f: Suppress Chromium's tap-highlight flash on the native control. Firefox has no
+  equivalent behavior, so an unstyled control only flashed on Chrome despite the
+  existing focus-outline reset.
+- 77f9c63: Fix three theme gaps where a token fell through to a system color.
+
+  **Substrate had no error color.** `--rc-field-error-color` fell through to `rc-field`'s own
+  default of `Mark`, the system color for the background of highlighted text, which renders as
+  pure yellow and measured 1.07:1 against the field. Validation worked, the message was in the
+  accessibility tree, and it could not be read. Substrate now ships `--substrate-error`, held
+  at hue 25 so it reads as red rather than as a darker shade of the orange primary at hue 48,
+  and the bridge maps it. Both modes clear 7:1.
+
+  Every remaining error fallback of `Mark`, in `rc-field` and in the Material field styles, now
+  falls back to the validation red a user agent uses for an invalid control. The `Mark` usages
+  inside `forced-colors` blocks are unchanged, where a system color is correct.
+
+  **Material never set `--rc-button-text`.** `rc-select`, `rc-combobox`, and `rc-menu-button`
+  read it directly for text drawn over `--rc-button-bg`, which Material sets to the primary
+  fill, so the `ButtonText` fallback gave 3.26:1 in light and 1.70:1 in dark. It now follows
+  `--md-sys-color-on-primary` alongside `--rc-button-color`, giving 6.44:1 and 7.71:1.
+
+  **Substrate referenced three tokens it never declared.** `--substrate-inverse-surface`,
+  `--substrate-inverse-on-surface`, and `--substrate-radius-pill` were used by the bridge and
+  component styles but missing from `defaults.css`, leaving `rc-snackbar` on system colors and
+  the bottom sheet handle on a literal. All three are declared, and a `defaults` test now
+  asserts that every referenced token exists.
+
+- Updated dependencies [50d5610]
+- Updated dependencies [4341311]
+  - @rcarls/rc-common@0.0.0-next-20260921045401

package/README.md

@@ -0,0 +1,88 @@
+# rc-field
+
+Accessible field wrapper for a native input, textarea, or select with labels and supporting text.
+
+Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-field](https://richardcarls.github.io/rc-webcomponents/components/rc-field).
+
+`rc-field` keeps the native control in light DOM as the source of truth for value, validation,
+autofill, labels, and form submission. It adds layout, state hooks, accessible hint/error wiring,
+and theme affordances without replacing the browser's control behavior.
+
+## Install
+
+```bash
+npm install @rcarls/rc-field
+```
+
+```bash
+yarn add @rcarls/rc-field
+```
+
+## Use
+
+```js
+import '@rcarls/rc-field/define';
+```
+
+```html
+<rc-field counter>
+  <label slot="label" for="recipe-title">Recipe title</label>
+  <input id="recipe-title" name="title" maxlength="80" required />
+  <small slot="hint">Use the title printed on the recipe.</small>
+  <small slot="error">Enter a recipe title.</small>
+</rc-field>
+```
+
+The control must be a direct child. Use an explicit `for` and `id` pair when the label should work
+before custom-element upgrade. A slotted native label without `for` is associated automatically
+after upgrade; an ancestor native label can wrap the complete field instead. Native `input`,
+`change`, and `invalid` events are not replaced or duplicated.
+
+Call `sync()` after changing `.value` programmatically. Native input events, constraint attributes,
+form reset, and control replacement synchronize automatically.
+
+## Material theme
+
+Import `@rcarls/rc-theme-material/theme.css` and place the field under `.rc-theme-material`.
+Filled is the default treatment; add `class="rc-field--outlined"` for the outlined variant.
+
+An enhancing control may wrap the native control when the direct child is explicitly marked as
+the field control provider. The native control must remain its direct child:
+
+```html
+<rc-field>
+  <label slot="label" for="notes">Notes</label>
+  <rc-textarea data-rc-field-control>
+    <textarea id="notes" name="notes"></textarea>
+  </rc-textarea>
+</rc-field>
+```
+
+`select` is a supported control shape too, either as a plain direct child:
+
+```html
+<rc-field>
+  <label slot="label" for="unit">Unit</label>
+  <select id="unit" name="unit">
+    <option value="oz">oz</option>
+    <option value="mL">mL</option>
+  </select>
+</rc-field>
+```
+
+or wrapped by an enhancing control provider the same way as `rc-textarea`:
+
+```html
+<rc-field>
+  <label slot="label" for="categories">Categories</label>
+  <rc-combobox data-rc-field-control multiple allow-create>
+    <select id="categories" name="categories" multiple>
+      <option value="braiser">Braiser</option>
+      <option value="chicken">Chicken</option>
+    </select>
+  </rc-combobox>
+</rc-field>
+```
+
+A multiple select's populated state comes from `selectedOptions`, not `.value` (which only ever
+reflects the first *selected* option in tree order and can read empty even with a real selection).