@rcarls/rc-textarea 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,209 @@
 # @rcarls/rc-textarea
 
+## 0.7.0
+
+### 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.
+
+- 905083b: Give `rc-textarea` a content language and direction separate from its
+  interface. The slotted `<textarea>` describes the text: its `lang` and
+  `spellcheck` are mirrored onto the editor, so the browser picks the right
+  glyphs and spelling dictionary, and its `dir` sets the editor's base
+  direction. `dir="auto"` resolves from the value's first strong character,
+  uses LTR when there is none (matching native HTML), and updates as the value changes.
+  Without `dir`, the editor inherits as before. The host's own `lang` stays
+  the interface language.
+
+  A new `line-direction` attribute (`lineDirection` property) chooses how
+  each line's direction is set. `base`, the default, keeps every line in the
+  editor's direction. `auto` orders and aligns each line with a letter by its
+  own first strong character, for prose that mixes scripts, and holds lines
+  without one (empty lines, quantities) to the base direction. Widgets and
+  line messages are now bidi-isolated, so they never reorder neighboring
+  text.
+
+  Changes to the native textarea's `lang` or `dir` rerun plugin rendering.
+  The plugin API adds `contentDirection`, `contentLang` and
+  `lineDirection(line)`. The React and Solid typings add `lineDirection` and
+  `line-direction`.
+
+  **Breaking:**
+
+  - Line numbers are formatted with `Intl.NumberFormat` for the interface
+    locale (the host's `lang`, else `<html lang>`), so an `ar-EG` interface
+    shows Arabic-Indic digits. Set `lang="ar-EG-u-nu-latn"`, or another
+    `-u-nu-latn` tag, on the host to keep Latin digits.
+  - `getWordAtCursor()` segments words with `Intl.Segmenter` for the
+    textarea's `lang` instead of matching ASCII `\w`. Accented and non-Latin
+    words are now found whole, and `don't` and `3.14` are one word each;
+    `snake_case` still is. Without `Intl.Segmenter` it scans letters, digits
+    and `_`.
+
+- 6b99ced: **Breaking:** replace `LineDisclosureController` with `FoldingActionController`.
+  Pass a caller-owned panel as `target` and render it through a block widget, or pass
+  `{ fromLine, toLine }` to fold source lines. Panel creation and content revision now
+  belong to the plugin. Set `initiallyExpanded: false` to retain the old diagnostic
+  panel default; call `clear()` when document identity changes.
+
+  Folding actions keep source text, form values, and undo history intact. The Markdown
+  plugin adds gutter folds for heading sections, lists, code blocks, block quotes,
+  and GFM tables. The base gutter has a 24px minimum width; Material uses 48px.
+  Folding buttons expose `fold-trigger` and `fold-icon` CSS parts, and
+  `createMarkdownPlugin({ folding: { createTriggerIcon } })` lets consumers choose
+  the Markdown fold icon.
+
+- d3fc2f3: Add independent line disclosures with accessible gutter or trailing controls,
+  configurable trigger icons, block widgets, and DOM gutter markers. Preserve keyed
+  widget content across unchanged renders and exclude diagnostic content from source
+  copying. Accessible widgets use
+  Tab for focus navigation; ordinary text editors retain tab insertion.
+  Gutter disclosures can retain a line-number lane alongside the trigger and other
+  markers, including when line numbers are toggled after mount.
+- 3325191: **Breaking:** take `rc-textarea`'s read-only state from the slotted `<textarea readonly>` and
+  remove the `read-only` attribute and its display styling without border or padding. A read-only
+  editor keeps the enabled field appearance, stays focusable and selectable, announces `aria-
+readonly` with the native control's label, and rejects edits. The host reflects `data-readonly`,
+  and `readOnly` is now a getter. The plugin `transform()` hook runs while the textarea is
+  `readonly`.
+
+  `rc-markdown-editor` passes its `read-only` state to a native textarea in its source editor.
+  Material and Substrate fields skip the hover affordance for a read-only control and keep its
+  focus indicator.
+
+  Migration: replace `<rc-textarea read-only>` with `readonly` on the slotted textarea, for
+  example `<rc-textarea><textarea aria-label="Notes" readonly></textarea></rc-textarea>`. Replace
+  `editor.readOnly = value` with `textarea.readOnly = value`. Read-only content that is not a form
+  value belongs in ordinary text or list markup instead.
+
+- 0e2d878: **Breaking:** replace `--rc-textarea-padding` with `--rc-textarea-padding-block` and
+  `--rc-textarea-padding-inline`. The active line highlight bleeds through the inline padding by
+  negating it, which a multi-value shorthand made invalid: inside a Material filled `rc-field`
+  (`0 1rem 0.5rem`) the highlight stopped short of the field's edges in the editor and gutter.
+  `--rc-textarea-padding-inline` is one length applied to both inline sides, so the bleed stays
+  valid and follows RTL and vertical writing modes through logical insets.
+  `--rc-textarea-padding-block` accepts any `padding-block` value.
+
+  Migration: split each `--rc-textarea-padding` declaration. A single length `L` becomes
+  `--rc-textarea-padding-block: L; --rc-textarea-padding-inline: L`. A shorthand
+  `T X B` becomes `--rc-textarea-padding-block: T B; --rc-textarea-padding-inline: X`.
+
+### Patch Changes
+
+- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
+  and light-DOM structural styles through Lightning CSS, removing comments and
+  whitespace while keeping source maps that resolve to each template. Rendered
+  styles are unchanged.
+
+  `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
+  string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
+  depend on `@rcarls/rc-common` for it.
+
+- b764a3c: Observe interface locale changes through containing shadow roots and the host's own document.
+  An explicit empty `lang` now means an unknown locale rather than falling back to `<html lang>`.
+  Typeahead compares complete grapheme prefixes, including decomposed accents and collation
+  expansions. Default interpolating messages format numeric positions in the interface locale
+  while translation callbacks continue to receive numbers and can accept an optional locale.
+  Default messages isolate consumer text whose direction is unknown. Textarea content direction
+  uses the native LTR fallback for neutral `dir="auto"` content, recognizes Arabic Letter Mark and
+  isolate controls, and reruns plugins when the native textarea's `lang` or `dir` changes.
+- cc0205d: Use logical CSS properties so layout follows the reading direction and
+  writing mode: the textarea gutter border and alignment, line-action and
+  diagnostic-message spacing, the markdown editor's block quote and list
+  indents, and block-axis scrolling for listbox, select, combobox, and markdown
+  panes, each keeping its physical declaration as a fallback.
+- 50c0657: Align the line-actions popover and the markdown editor's link popover to the
+  inline start of what they belong to, so they sit under the right edge in RTL
+  instead of the left.
+- 8387c20: Extend the `rc-textarea` active-line highlight edge to edge. The active line
+  and its gutter cell now paint `--rc-textarea-active-line-bg` through the editor
+  and gutter padding, so the row reads as one band across the whole control.
+- c328259: Keep textarea gutter rows aligned with editor lines in vertical writing modes.
+- f1433a9: `LineActionsOptions.createIcon` and `FoldingActionControllerOptions.createTriggerIcon`
+  now accept any `Element`, so an icon can be a plain inline `<svg>` rather than an
+  `HTMLElement` such as an icon custom element. Existing callbacks still type-check.
+- 4617b45: Keep active-line and cursor tracking consistent when browsers expose a shadow-DOM selection
+  through different selection APIs.
+- 54067cc: Tab no longer traps keyboard focus in the editor. Escape followed by Tab moves focus to the next control, and Shift+Tab moves focus to the previous control instead of inserting a tab character.
+- 57d6371: Size line-number gutter rows in local CSS pixels under zoom so wrapped and
+  unwrapped lines stay aligned with their editor rows.
+- Updated dependencies [e3dfa59]
+- Updated dependencies [50d5610]
+- Updated dependencies [9ee769c]
+- Updated dependencies [1179f24]
+- Updated dependencies [595fe37]
+- Updated dependencies [38cd00c]
+- Updated dependencies [5c006de]
+- Updated dependencies [a6553ff]
+- Updated dependencies [2205478]
+- Updated dependencies [4341311]
+- Updated dependencies [899bb5e]
+- Updated dependencies [25fcfe0]
+- Updated dependencies [51f6403]
+- Updated dependencies [9caca6b]
+- Updated dependencies [b764a3c]
+- Updated dependencies [54d9ead]
+- Updated dependencies [b9175e9]
+- Updated dependencies [c8b762b]
+- Updated dependencies [55e1e7f]
+- Updated dependencies [f1ca82d]
+- Updated dependencies [b87f27b]
+- Updated dependencies [32ebead]
+- Updated dependencies [bfefedd]
+- Updated dependencies [c130173]
+- Updated dependencies [11680b6]
+- Updated dependencies [223d36c]
+- Updated dependencies [7b91a44]
+- Updated dependencies [aa04ead]
+- Updated dependencies [ac65b5b]
+- Updated dependencies [afcfef8]
+- Updated dependencies [11ef1ad]
+  - @rcarls/rc-common@0.7.0
+
+## 0.6.0
+
+### Patch Changes
+
+- 985067e: Allow `rc-textarea` to shrink below its intrinsic content width so `word-wrap`
+  wraps long, unbroken lines inside narrow grid and flex layouts instead of
+  forcing the consumer layout to overflow.
+- 57370e4: Align component metadata, aggregate framework typings, development-time native-child
+  validation, controlled menu state, package declarations, and public documentation before the
+  next release.
+- Updated dependencies [6683eb9]
+- Updated dependencies [ee7ba6c]
+- Updated dependencies [30eb232]
+  - @rcarls/rc-common@0.6.0
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -1,6 +1,6 @@
 # rc-textarea
 
-Textarea wrapper with line decorations, gutter rendering, inline widgets, and plugin hooks.
+Textarea wrapper with line decorations, gutter rendering, folding actions, and plugin hooks.
 
 Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-textarea](https://richardcarls.github.io/rc-webcomponents/components/rc-textarea).
 
@@ -85,16 +85,31 @@ When the user edits, the slotted textarea is kept in sync and dispatches a nativ
 
 ## Common Options
 
-| Attribute      | Property      | Description                                                                         |
-| -------------- | ------------- | ----------------------------------------------------------------------------------- |
-| `line-numbers` | `lineNumbers` | Show sequential line numbers in the gutter.                                         |
-| `gutter`       | `gutter`      | Show an empty gutter that plugins can populate with `LineDecoration.gutterContent`. |
-| `word-wrap`    | `wordWrap`    | Wrap long lines instead of scrolling horizontally.                                  |
-| `auto-grow`    | `autoGrow`    | Let the field grow vertically with content.                                         |
-| `read-only`    | `readOnly`    | Render selectable, non-editable content.                                            |
+| Attribute        | Property        | Description                                                                               |
+| ---------------- | --------------- | ----------------------------------------------------------------------------------------- |
+| `line-numbers`   | `lineNumbers`   | Show sequential line numbers in the gutter.                                               |
+| `gutter`         | `gutter`        | Show an empty gutter that plugins can populate with `LineDecoration.gutterContent`.       |
+| `word-wrap`      | `wordWrap`      | Wrap long lines instead of scrolling horizontally.                                        |
+| `auto-grow`      | `autoGrow`      | Let the field grow vertically with content.                                               |
+| `line-direction` | `lineDirection` | `base` (default) gives every line the editor's direction; `auto` gives each line its own. |
+
+Read-only state comes from the slotted native control: set `readonly` on the `<textarea>`. The
+editor keeps the enabled field appearance, stays focusable and selectable, announces
+`aria-readonly`, and rejects edits. The host reflects `data-readonly`, and the `readOnly` getter
+reports the state.
+
+Put the content's `lang`, `dir` and `spellcheck` on the slotted `<textarea>`: the editor mirrors
+`lang` and `spellcheck`, and takes its base direction from `dir` (`auto` follows the native
+textarea's first strong character, or LTR when there is none). Changing the textarea's
+`lang` or `dir` reruns plugins. The host's own `lang` stays the interface language and formats
+line numbers.
+Add `line-direction="auto"` for prose that mixes scripts; lines without a letter keep the base
+direction.
 
 Use a plugin with `LineDecoration.gutterContent` for sparse numbering. Put accessible names on
 the slotted textarea with `aria-label` or a real `<label for="...">`.
+Use `gutterLineNumber: true` with custom content to display the built-in number
+and a plugin control together when `line-numbers` is enabled.
 
 The main JavaScript-only properties are:
 
@@ -234,31 +249,42 @@ for the field, then add component tokens for editor-specific surfaces.
 
 The component reads inherited tokens where possible:
 
-| Token          | Use                                                          |
-| -------------- | ------------------------------------------------------------ |
-| `--rc-text`    | Fallback text color before `--rc-textarea-color`.            |
-| `color-scheme` | Inherited by the host so system colors match the page theme. |
+| Token             | Use                                                          |
+| ----------------- | ------------------------------------------------------------ |
+| `--rc-field-text` | Fallback text color before `--rc-textarea-color`.            |
+| `color-scheme`    | Inherited by the host so system colors match the page theme. |
 
 ### Component Tokens
 
-| Token                                     | Default                                     | Use                                   |
-| ----------------------------------------- | ------------------------------------------- | ------------------------------------- |
-| `--rc-textarea-font-family`               | `monospace`                                 | Editor font family.                   |
-| `--rc-textarea-font-size`                 | `1em`                                       | Editor and gutter font size.          |
-| `--rc-textarea-line-height`               | `1.5`                                       | Editor and gutter line height.        |
-| `--rc-textarea-padding`                   | `0.5em`                                     | Editor and gutter padding.            |
-| `--rc-textarea-background`                | `Field`                                     | Field background.                     |
-| `--rc-textarea-color`                     | `var(--rc-text, FieldText)`                 | Field text color.                     |
-| `--rc-textarea-caret-color`               | `var(--rc-textarea-color, FieldText)`       | Caret color.                          |
-| `--rc-textarea-border`                    | `1px solid ButtonBorder`                    | Field border.                         |
-| `--rc-textarea-border-radius`             | `2px`                                       | Field corner radius.                  |
-| `--rc-textarea-focus-outline`             | `2px solid Highlight`                       | Focus ring.                           |
-| `--rc-textarea-active-line-bg`            | `transparent`                               | Active line background.               |
-| `--rc-textarea-gutter-bg`                 | `Canvas`                                    | Gutter background.                    |
-| `--rc-textarea-gutter-color`              | `GrayText`                                  | Gutter text color.                    |
-| `--rc-textarea-gutter-border`             | `1px solid ButtonBorder`                    | Gutter separator.                     |
-| `--rc-textarea-gutter-font-family`        | `var(--rc-textarea-font-family, monospace)` | Gutter font family.                   |
-| `--rc-textarea-gutter-padding-inline-end` | `0.75em`                                    | Space between gutter labels and text. |
+| Token                                     | Default                                     | Use                                                                                                                      |
+| ----------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `--rc-textarea-font-family`               | `monospace`                                 | Editor font family.                                                                                                      |
+| `--rc-textarea-font-size`                 | `1em`                                       | Editor and gutter font size.                                                                                             |
+| `--rc-textarea-line-height`               | `1.5`                                       | Editor and gutter line height.                                                                                           |
+| `--rc-textarea-padding-block`             | `0.5em`                                     | Editor and gutter block padding; any `padding-block` value.                                                              |
+| `--rc-textarea-padding-inline`            | `0.5em`                                     | Editor inline padding (both sides) and gutter start padding; one length, which the active line highlight bleeds through. |
+| `--rc-textarea-gutter-min-inline-size`    | `24px`                                      | Minimum gutter width including padding; Material uses `48px`.                                                            |
+| `--rc-textarea-background`                | `Field`                                     | Field background.                                                                                                        |
+| `--rc-textarea-color`                     | `var(--rc-field-text, FieldText)`           | Field text color.                                                                                                        |
+| `--rc-textarea-caret-color`               | `var(--rc-textarea-color, FieldText)`       | Caret color.                                                                                                             |
+| `--rc-textarea-border`                    | `1px solid ButtonBorder`                    | Field border.                                                                                                            |
+| `--rc-textarea-border-radius`             | `2px`                                       | Field corner radius.                                                                                                     |
+| `--rc-textarea-focus-outline`             | `2px solid Highlight`                       | Focus ring.                                                                                                              |
+| `--rc-textarea-active-line-bg`            | `transparent`                               | Full-width active line highlight.                                                                                        |
+| `--rc-textarea-gutter-bg`                 | `Canvas`                                    | Gutter background.                                                                                                       |
+| `--rc-textarea-gutter-color`              | `GrayText`                                  | Gutter text color.                                                                                                       |
+| `--rc-textarea-gutter-border`             | `1px solid ButtonBorder`                    | Gutter separator.                                                                                                        |
+| `--rc-textarea-gutter-font-family`        | `var(--rc-textarea-font-family, monospace)` | Gutter font family.                                                                                                      |
+| `--rc-textarea-gutter-padding-inline-end` | `0.75em`                                    | Space between gutter labels and text.                                                                                    |
+
+Line actions added by plugins use the `--rc-line-action-*` family. Inline actions default to
+compact, inherited styling; popover actions use `Canvas`, `ButtonText`, and `ButtonFace` system
+colors where their surface needs an independent default. The public hooks are
+`--rc-line-actions-gap`, `--rc-line-actions-margin-start`, `--rc-line-action-padding`,
+`--rc-line-action-border`, `--rc-line-action-border-radius`, `--rc-line-action-bg`,
+`--rc-line-action-color`, `--rc-line-action-font-size`, `--rc-line-action-opacity`,
+`--rc-line-action-hover-opacity`, `--rc-line-action-hover-bg`,
+`--rc-line-action-hover-color`, and `--rc-line-action-shadow`.
 
 ```css
 rc-textarea {
@@ -274,7 +300,8 @@ rc-textarea {
 
 ### Parts And Decoration Styles
 
-The exposed CSS parts are `root`, `gutter`, `gutter-cells`, `editor-area`, and `editor`.
+The exposed CSS parts are `root`, `gutter`, `gutter-cells`, `editor-area`, `editor`,
+`fold-trigger`, and `fold-icon` (when a plugin supplies an icon).
 
 ```css
 rc-textarea::part(editor) {
@@ -291,6 +318,8 @@ syntax highlighter.
 | Key                               | Behavior                                                     |
 | --------------------------------- | ------------------------------------------------------------ |
 | `Tab`                             | Inserts `\t`.                                                |
+| `Escape`, then `Tab`              | Moves focus to the next control instead of inserting `\t`.   |
+| `Shift+Tab`                       | Moves focus to the previous control.                         |
 | `Ctrl/Cmd+Z`                      | Undo.                                                        |
 | `Ctrl/Cmd+Y` / `Ctrl/Cmd+Shift+Z` | Redo.                                                        |
 | `Paste`                           | Inserts plain text only and normalizes line endings to `\n`. |
@@ -298,6 +327,13 @@ syntax highlighter.
 
 ## More Detail
 
+`FoldingActionController` provides independent accessible buttons for caller-owned panels
+or source-line ranges. It retains expansion by key and leaves content creation to the plugin.
+Source folds hide complete editor and gutter lines while preserving the submitted text.
+Buttons can sit in the gutter or trailing lane. See the
+[interactive folding examples](https://richardcarls.github.io/rc-webcomponents/components/rc-textarea#folding-actions)
+for setup and lifecycle details.
+
 - [PLUGIN_AUTHORING.md](PLUGIN_AUTHORING.md) covers custom plugins, decoration types,
   selection APIs, stylesheet injection, and parser/highlighter recipes.
 - [ARCHITECTURE.md](ARCHITECTURE.md) is an internal contributor reference for the rendering