@rcarls/rc-transfer-list 0.0.0-next-20260921045401
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +146 -0
- package/README.md +141 -0
- package/dist/custom-elements.json +654 -0
- package/dist/rc-transfer-list-Bx4GfPjM.js +476 -0
- package/dist/rc-transfer-list-Bx4GfPjM.js.map +1 -0
- package/dist/rc-transfer-list-define.js +6 -0
- package/dist/rc-transfer-list-define.js.map +1 -0
- package/dist/rc-transfer-list.js +5 -0
- package/dist/rc-transfer-list.js.map +1 -0
- package/dist/types/packages/rc-transfer-list/src/define.d.ts +1 -0
- package/dist/types/packages/rc-transfer-list/src/index.d.ts +1 -0
- package/dist/types/packages/rc-transfer-list/src/rc-transfer-list.d.ts +140 -0
- package/dist/types/packages/rc-transfer-list/src/rc-transfer-list.styles.d.ts +2 -0
- package/package.json +67 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
# @rcarls/rc-transfer-list
|
|
2
|
+
|
|
3
|
+
## 0.0.0-next-20260921045401
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 079e025: Standardize component styling contracts for the breaking 0.7 release.
|
|
8
|
+
|
|
9
|
+
BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
|
|
10
|
+
`--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
|
|
11
|
+
`--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
|
|
12
|
+
`--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
|
|
13
|
+
`--rc-chip-group-webkit-scrollbar-display` to
|
|
14
|
+
`--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
|
|
15
|
+
Compatibility aliases are intentionally not provided.
|
|
16
|
+
|
|
17
|
+
BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
|
|
18
|
+
`--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
|
|
19
|
+
`*-padding-inline-end` tokens. Generated removable chips now reserve the full
|
|
20
|
+
remove target and its edge offset, so their indicator cannot overlap label text.
|
|
21
|
+
|
|
22
|
+
Add canonical app-bar elevation, transfer-list listbox radius, and textarea
|
|
23
|
+
line-action tokens. Add logical `rc-chip` inline-padding properties so themes
|
|
24
|
+
can implement Material's icon-aware spacing without overriding authored child
|
|
25
|
+
styles. Make `rc-field` consume the shared semantic token layer,
|
|
26
|
+
and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
|
|
27
|
+
`rc-base` cascade layer so normal consumer rules override them.
|
|
28
|
+
|
|
29
|
+
Prevent decorative, `aria-hidden` trailing list content from intercepting a
|
|
30
|
+
whole-row action target, and keep segmented-list item geometry from leaking
|
|
31
|
+
into nested standard lists.
|
|
32
|
+
|
|
33
|
+
Remove unused Material navigation-rail toggle tokens and obsolete list-item
|
|
34
|
+
theme tokens. Register the segmented-button private theme seam and enforce
|
|
35
|
+
token ownership, documentation, removed-name, selector-budget, and cascade
|
|
36
|
+
layer contracts through the component architecture audit.
|
|
37
|
+
|
|
38
|
+
### Patch Changes
|
|
39
|
+
|
|
40
|
+
- Updated dependencies [50d5610]
|
|
41
|
+
- Updated dependencies [4341311]
|
|
42
|
+
- @rcarls/rc-common@0.0.0-next-20260921045401
|
|
43
|
+
- @rcarls/rc-listbox@0.0.0-next-20260921045401
|
|
44
|
+
- @rcarls/rc-toolbar@0.0.0-next-20260921045401
|
|
45
|
+
|
|
46
|
+
## 0.6.0
|
|
47
|
+
|
|
48
|
+
### Patch Changes
|
|
49
|
+
|
|
50
|
+
- Updated dependencies [6683eb9]
|
|
51
|
+
- Updated dependencies [ee7ba6c]
|
|
52
|
+
- Updated dependencies [30eb232]
|
|
53
|
+
- Updated dependencies [57370e4]
|
|
54
|
+
- @rcarls/rc-common@0.6.0
|
|
55
|
+
- @rcarls/rc-toolbar@0.6.0
|
|
56
|
+
- @rcarls/rc-listbox@0.6.0
|
|
57
|
+
|
|
58
|
+
## 0.5.0
|
|
59
|
+
|
|
60
|
+
### Patch Changes
|
|
61
|
+
|
|
62
|
+
- Updated dependencies [4ae2ef0]
|
|
63
|
+
- Updated dependencies [689340c]
|
|
64
|
+
- @rcarls/rc-common@0.5.0
|
|
65
|
+
- @rcarls/rc-listbox@0.5.0
|
|
66
|
+
- @rcarls/rc-toolbar@0.5.0
|
|
67
|
+
|
|
68
|
+
## 0.4.2
|
|
69
|
+
|
|
70
|
+
### Patch Changes
|
|
71
|
+
|
|
72
|
+
- @rcarls/rc-common@0.4.2
|
|
73
|
+
- @rcarls/rc-listbox@0.4.2
|
|
74
|
+
- @rcarls/rc-toolbar@0.4.2
|
|
75
|
+
|
|
76
|
+
## 0.4.1
|
|
77
|
+
|
|
78
|
+
### Patch Changes
|
|
79
|
+
|
|
80
|
+
- @rcarls/rc-common@0.4.1
|
|
81
|
+
- @rcarls/rc-listbox@0.4.1
|
|
82
|
+
- @rcarls/rc-toolbar@0.4.1
|
|
83
|
+
|
|
84
|
+
## 0.4.0
|
|
85
|
+
|
|
86
|
+
### Patch Changes
|
|
87
|
+
|
|
88
|
+
- 838c7a0: Document the `multiple`, `compact`, `available-label`, and `selected-label`
|
|
89
|
+
attributes, the 12 previously-undocumented CSS parts (panel/listbox labels,
|
|
90
|
+
both `rc-listbox` elements, and the six named toolbar buttons), and the
|
|
91
|
+
`--rc-transfer-list-listbox-bg`, `--rc-transfer-list-listbox-color`,
|
|
92
|
+
`--rc-transfer-list-option-hover-bg`, and
|
|
93
|
+
`--rc-transfer-list-option-hover-color` CSS custom properties in the generated
|
|
94
|
+
API reference.
|
|
95
|
+
- Updated dependencies [b7270df]
|
|
96
|
+
- Updated dependencies [e57277f]
|
|
97
|
+
- Updated dependencies [74d9046]
|
|
98
|
+
- Updated dependencies [8944083]
|
|
99
|
+
- Updated dependencies [ccca8e2]
|
|
100
|
+
- Updated dependencies [4df89fd]
|
|
101
|
+
- Updated dependencies [037b1b3]
|
|
102
|
+
- @rcarls/rc-toolbar@0.4.0
|
|
103
|
+
- @rcarls/rc-common@0.4.0
|
|
104
|
+
- @rcarls/rc-listbox@0.4.0
|
|
105
|
+
|
|
106
|
+
## 0.3.2
|
|
107
|
+
|
|
108
|
+
### Patch Changes
|
|
109
|
+
|
|
110
|
+
- Updated dependencies [88b4086]
|
|
111
|
+
- @rcarls/rc-common@0.3.2
|
|
112
|
+
- @rcarls/rc-listbox@0.3.2
|
|
113
|
+
- @rcarls/rc-toolbar@0.3.2
|
|
114
|
+
|
|
115
|
+
## 0.3.1
|
|
116
|
+
|
|
117
|
+
### Patch Changes
|
|
118
|
+
|
|
119
|
+
- @rcarls/rc-common@0.3.1
|
|
120
|
+
- @rcarls/rc-listbox@0.3.1
|
|
121
|
+
- @rcarls/rc-toolbar@0.3.1
|
|
122
|
+
|
|
123
|
+
## 0.3.0
|
|
124
|
+
|
|
125
|
+
### Added
|
|
126
|
+
|
|
127
|
+
- Add typed listbox action option support through embedded listboxes.
|
|
128
|
+
- Add a compact layout variant.
|
|
129
|
+
|
|
130
|
+
### Changed
|
|
131
|
+
|
|
132
|
+
- Move owned UI into shadow DOM with static styles.
|
|
133
|
+
- Normalize embedded listbox option styling around `--rc-listbox-*` custom properties.
|
|
134
|
+
- Move native child observation onto shared primitives.
|
|
135
|
+
- Update package metadata, README intro, and docs links.
|
|
136
|
+
|
|
137
|
+
### Dependencies
|
|
138
|
+
|
|
139
|
+
- Sync internal dependencies to 0.3.0.
|
|
140
|
+
|
|
141
|
+
## 0.2.0
|
|
142
|
+
|
|
143
|
+
### Patch Changes
|
|
144
|
+
|
|
145
|
+
- @rcarls/rc-listbox@0.2.0
|
|
146
|
+
- @rcarls/rc-toolbar@0.2.0
|
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @rcarls/rc-transfer-list
|
|
2
|
+
|
|
3
|
+
Transfer list that enhances a native `<select multiple>` into available and selected panes.
|
|
4
|
+
|
|
5
|
+
Docs: [https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list](https://richardcarls.github.io/rc-webcomponents/components/rc-transfer-list).
|
|
6
|
+
|
|
7
|
+
The component renders two listboxes and transfer/reorder actions in between.
|
|
8
|
+
Available options are on the left, and selected options appear on the right. It
|
|
9
|
+
is an older enterprise/admin UI pattern, but solves the specific problem of
|
|
10
|
+
multiple selection within a large amount of options.
|
|
11
|
+
|
|
12
|
+
Modern use cases include user and permissions management tasks, multi-select for
|
|
13
|
+
columns / fields / filters and list re-ordering.
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @rcarls/rc-transfer-list
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
yarn add @rcarls/rc-transfer-list
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Import
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import '@rcarls/rc-transfer-list/define';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
```html
|
|
34
|
+
<rc-transfer-list available-label="Available planets" selected-label="Mission route">
|
|
35
|
+
<select name="planets" multiple>
|
|
36
|
+
<option value="mercury">Mercury</option>
|
|
37
|
+
<option value="venus" selected>Venus</option>
|
|
38
|
+
<option value="earth">Earth</option>
|
|
39
|
+
<option value="mars">Mars</option>
|
|
40
|
+
</select>
|
|
41
|
+
</rc-transfer-list>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The selected/right-hand list is reflected back to the native select, so form
|
|
45
|
+
submission serializes selected option values in the order shown in the selected
|
|
46
|
+
panel.
|
|
47
|
+
|
|
48
|
+
Use the `compact` attribute when the surrounding layout should present the
|
|
49
|
+
available list, actions, and selected list in one column. The component does not
|
|
50
|
+
switch layout automatically at viewport breakpoints.
|
|
51
|
+
|
|
52
|
+
## API
|
|
53
|
+
|
|
54
|
+
### Properties
|
|
55
|
+
|
|
56
|
+
| Property | Attribute | Type | Default | Description |
|
|
57
|
+
| ----------------- | ----------------- | ------------------------------ | ------------------- | ----------------------------------------------------------------------------- |
|
|
58
|
+
| `multiple` | `multiple` | `boolean` | `false` | Allows multiple highlighted rows in each listbox. |
|
|
59
|
+
| `compact` | `compact` | `boolean` | `false` | Stacks the panels and action toolbar into a compact one-column layout. |
|
|
60
|
+
| `availableLabel` | `available-label` | `string` | `'Available'` | Visible label for the available list. |
|
|
61
|
+
| `selectedLabel` | `selected-label` | `string` | `'Selected'` | Visible label for the selected list. |
|
|
62
|
+
| `available` | - | `ListboxOption[]` | native select state | Gets or replaces unselected options. |
|
|
63
|
+
| `selected` | - | `ListboxOption[]` | native select state | Gets or replaces selected options. |
|
|
64
|
+
| `defaultSelected` | - | `ListboxOption[] \| undefined` | `undefined` | Initial uncontrolled selected options, applied before host `selected` writes. |
|
|
65
|
+
|
|
66
|
+
### Methods
|
|
67
|
+
|
|
68
|
+
| Method | Description |
|
|
69
|
+
| --------------------- | -------------------------------------------------------------- |
|
|
70
|
+
| `addSelected()` | Moves highlighted available options to the selected list. |
|
|
71
|
+
| `addAll()` | Moves every available option to the selected list. |
|
|
72
|
+
| `removeSelected()` | Moves highlighted selected options back to the available list. |
|
|
73
|
+
| `clearSelected()` | Moves every selected option back to the available list. |
|
|
74
|
+
| `moveSelected(delta)` | Reorders highlighted selected options by `-1` or `1` rows. |
|
|
75
|
+
|
|
76
|
+
### Events
|
|
77
|
+
|
|
78
|
+
| Event | Detail | Description |
|
|
79
|
+
| ------------------------- | ------------------------------- | --------------------------------------------------------------- |
|
|
80
|
+
| `rc-transfer-list-change` | `{ selected: ListboxOption[] }` | Fires after a user action changes the selected/right-hand list. |
|
|
81
|
+
|
|
82
|
+
Host property writes to `available`, `selected`, or `defaultSelected` are silent.
|
|
83
|
+
|
|
84
|
+
## Keyboard
|
|
85
|
+
|
|
86
|
+
The embedded `rc-listbox` controls provide list navigation and selection. The
|
|
87
|
+
transfer list also supports these shortcuts when focus is inside the component:
|
|
88
|
+
|
|
89
|
+
| Shortcut | Action |
|
|
90
|
+
| ---------------- | ----------------------------------------------------------- |
|
|
91
|
+
| `Alt+ArrowRight` | Add highlighted available options. |
|
|
92
|
+
| `Alt+ArrowLeft` | Remove highlighted selected options. |
|
|
93
|
+
| `Alt+ArrowUp` | Move highlighted selected options up. |
|
|
94
|
+
| `Alt+ArrowDown` | Move highlighted selected options down. |
|
|
95
|
+
| `Enter` | Add the highlighted available option in single-select mode. |
|
|
96
|
+
| `Delete` | Remove highlighted selected options. |
|
|
97
|
+
|
|
98
|
+
## Styling Hooks
|
|
99
|
+
|
|
100
|
+
Panels expose `data-empty` when their backing list has no options and
|
|
101
|
+
`data-has-selection` when that panel currently has highlighted rows. The root
|
|
102
|
+
exposes `data-can-move-up` and `data-can-move-down` when the selected panel has
|
|
103
|
+
highlighted rows that can be reordered in that direction.
|
|
104
|
+
|
|
105
|
+
| CSS custom property | Default | Description |
|
|
106
|
+
| ------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------ |
|
|
107
|
+
| `--rc-transfer-list-gap` | `var(--rc-control-gap, 0.75rem)` | Gap between panels and the action toolbar. |
|
|
108
|
+
| `--rc-transfer-list-panel-gap` | `var(--rc-control-gap, 0.35rem)` | Gap between a panel label and its listbox. |
|
|
109
|
+
| `--rc-transfer-list-listbox-min-block-size` | `10rem` | Minimum block size for each listbox. |
|
|
110
|
+
| `--rc-transfer-list-listbox-border` | `var(--rc-border, 1px solid ButtonBorder)` | Border around each listbox. |
|
|
111
|
+
| `--rc-transfer-list-listbox-radius` | `var(--rc-control-radius, 0.125rem)` | Corner radius of each listbox. |
|
|
112
|
+
| `--rc-transfer-list-listbox-bg` | `var(--rc-surface, Canvas)` | Background of each listbox. |
|
|
113
|
+
| `--rc-transfer-list-listbox-color` | `var(--rc-field-text, FieldText)` | Text color of each listbox. |
|
|
114
|
+
| `--rc-transfer-list-option-gap` | `var(--rc-item-gap, 0.4em)` | Gap between option adornments and labels. |
|
|
115
|
+
| `--rc-transfer-list-option-padding-block` | `var(--rc-item-padding-block, 0.3em)` | Block padding for option rows. |
|
|
116
|
+
| `--rc-transfer-list-option-padding-inline` | `var(--rc-item-padding-inline, 0.75em)` | Inline padding for option rows. |
|
|
117
|
+
| `--rc-transfer-list-option-selected-bg` | `var(--rc-highlight, Highlight)` | Selected option background. |
|
|
118
|
+
| `--rc-transfer-list-option-selected-color` | `var(--rc-highlight-text, HighlightText)` | Selected option foreground. |
|
|
119
|
+
| `--rc-transfer-list-option-hover-bg` | `var(--rc-transfer-list-option-selected-bg, var(--rc-highlight, Highlight))` | Hovered/active option background. |
|
|
120
|
+
| `--rc-transfer-list-option-hover-color` | `var(--rc-transfer-list-option-selected-color, var(--rc-highlight-text, HighlightText))` | Hovered/active option foreground. |
|
|
121
|
+
|
|
122
|
+
| Part | Description |
|
|
123
|
+
| ------------------- | -------------------------------------------------------------- |
|
|
124
|
+
| `root` | Root layout wrapper. |
|
|
125
|
+
| `panel` | Shared list panel surface. |
|
|
126
|
+
| `available-panel` | Available/left panel. |
|
|
127
|
+
| `selected-panel` | Selected/right panel. |
|
|
128
|
+
| `label` | Shared panel label surface. |
|
|
129
|
+
| `available-label` | Label for the available panel. |
|
|
130
|
+
| `selected-label` | Label for the selected panel. |
|
|
131
|
+
| `listbox` | Shared listbox surface. |
|
|
132
|
+
| `available-listbox` | The available/left `rc-listbox`. |
|
|
133
|
+
| `selected-listbox` | The selected/right `rc-listbox`. |
|
|
134
|
+
| `actions` | Transfer action toolbar. |
|
|
135
|
+
| `button` | Shared action button surface. |
|
|
136
|
+
| `add-button` | Moves highlighted available options to the selected list. |
|
|
137
|
+
| `add-all-button` | Moves every available option to the selected list. |
|
|
138
|
+
| `remove-button` | Moves highlighted selected options back to the available list. |
|
|
139
|
+
| `clear-button` | Moves every selected option back to the available list. |
|
|
140
|
+
| `move-up-button` | Moves highlighted selected options up. |
|
|
141
|
+
| `move-down-button` | Moves highlighted selected options down. |
|