stimulus_plumbers 0.4.11 → 0.4.13

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.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +19 -0
  3. data/app/assets/javascripts/stimulus-plumbers/controllers.manifest.json +31 -9
  4. data/app/assets/javascripts/stimulus-plumbers/index.es.js +87 -96
  5. data/app/assets/javascripts/stimulus-plumbers/index.es.js.map +1 -1
  6. data/app/assets/javascripts/stimulus-plumbers/index.umd.js +1 -1
  7. data/app/assets/javascripts/stimulus-plumbers/index.umd.js.map +1 -1
  8. data/config/locales/en.yml +1 -0
  9. data/docs/architecture.md +1 -1
  10. data/docs/component/form.md +42 -20
  11. data/docs/component/icon.md +9 -9
  12. data/docs/guide.md +2 -1
  13. data/lib/stimulus_plumbers/components/button/icon_layout.rb +34 -0
  14. data/lib/stimulus_plumbers/components/button.rb +2 -23
  15. data/lib/stimulus_plumbers/components/card.rb +1 -1
  16. data/lib/stimulus_plumbers/components/combobox/builder.rb +52 -14
  17. data/lib/stimulus_plumbers/components/combobox/date.rb +35 -9
  18. data/lib/stimulus_plumbers/components/combobox/dropdown.rb +22 -6
  19. data/lib/stimulus_plumbers/components/combobox/time.rb +18 -5
  20. data/lib/stimulus_plumbers/components/combobox/trigger.rb +1 -1
  21. data/lib/stimulus_plumbers/components/combobox/typeahead.rb +23 -8
  22. data/lib/stimulus_plumbers/components/icon.rb +5 -3
  23. data/lib/stimulus_plumbers/components/indicator.rb +3 -1
  24. data/lib/stimulus_plumbers/components/link.rb +1 -1
  25. data/lib/stimulus_plumbers/components/list/item.rb +1 -1
  26. data/lib/stimulus_plumbers/components/ordered_list/item.rb +2 -2
  27. data/lib/stimulus_plumbers/components/popover.rb +7 -3
  28. data/lib/stimulus_plumbers/components/progress_bar.rb +3 -1
  29. data/lib/stimulus_plumbers/components/progress_meter.rb +3 -1
  30. data/lib/stimulus_plumbers/components/progress_ring.rb +4 -2
  31. data/lib/stimulus_plumbers/components/timeline/event.rb +5 -3
  32. data/lib/stimulus_plumbers/form/field.rb +4 -2
  33. data/lib/stimulus_plumbers/form/fields/inputs/code.rb +93 -32
  34. data/lib/stimulus_plumbers/form/fields/inputs/credit_card.rb +61 -33
  35. data/lib/stimulus_plumbers/form/fields/inputs/password.rb +37 -12
  36. data/lib/stimulus_plumbers/form/fields/inputs/search.rb +1 -1
  37. data/lib/stimulus_plumbers/form/fields/inputs/submit.rb +52 -7
  38. data/lib/stimulus_plumbers/generators/css_entrypoint.rb +10 -0
  39. data/lib/stimulus_plumbers/helpers/icon_helper.rb +2 -2
  40. data/lib/stimulus_plumbers/plumber/dispatcher.rb +14 -12
  41. data/lib/stimulus_plumbers/plumber/slots.rb +8 -8
  42. data/lib/stimulus_plumbers/themes/schema.rb +4 -0
  43. data/lib/stimulus_plumbers/version.rb +1 -1
  44. data/lib/stimulus_plumbers.rb +1 -0
  45. data/vendor/ARIA.md +3 -2
  46. data/vendor/component/manifest.json +8 -1
  47. data/vendor/controller/docs/input-formatter.md +18 -39
  48. data/vendor/controller/docs/input-revealable.md +65 -0
  49. data/vendor/controller/manifest.json +31 -9
  50. metadata +3 -1
data/lib/stimulus_plumbers.rb CHANGED
@@ -19,6 +19,7 @@ require_relative "stimulus_plumbers/plumber/base"
19
19
  require_relative "stimulus_plumbers/components/icon"
20
20
  require_relative "stimulus_plumbers/components/indicator"
21
21
  require_relative "stimulus_plumbers/components/avatar"
22
+ require_relative "stimulus_plumbers/components/button/icon_layout"
22
23
  require_relative "stimulus_plumbers/components/button"
23
24
  require_relative "stimulus_plumbers/components/button/slots"
24
25
  require_relative "stimulus_plumbers/components/button/group"
data/vendor/ARIA.md CHANGED
@@ -58,9 +58,10 @@ Two helper classes handle keyboard navigation in controllers — see [`stimulus-
58
58
  - Invalid fields: `aria-invalid="true"` + `aria-describedby` pointing to error message
59
59
  - Error message element: `role="alert"` or `aria-live="polite"` so it's announced
60
60
 
61
- #### Password Reveal (`input-formatter_controller`, `"password"` formatter)
61
+ #### Password Reveal (`input_revealable_controller`)
62
62
  - Toggle button: `aria-label` describes action ("Show password" / "Hide password")
63
- - `aria-pressed` managed on toggle button, reflecting revealed state
63
+ - One toggle button swaps visible eye/eye-slash icons and its accessible name; it has no `aria-pressed` because its name describes the next action rather than a persistent state.
64
+ - A live announcement was rejected: changing the input between `password` and `text` provides an independent cue when returning focus to the field, without adding chatty feedback.
64
65
 
65
66
  #### Code Input (`input_formatter_controller` + `character_cells`)
66
67
 
data/vendor/component/manifest.json CHANGED
@@ -129,7 +129,14 @@
129
129
  "actions": [
130
130
  "onBlur",
131
131
  "onFocus",
132
- "onInput",
132
+ "onInput"
133
+ ],
134
+ "listens": [],
135
+ "targets": [],
136
+ "values": []
137
+ },
138
+ "input-revealable": {
139
+ "actions": [
133
140
  "toggle"
134
141
  ],
135
142
  "listens": [],
data/vendor/controller/docs/input-formatter.md CHANGED
@@ -1,37 +1,34 @@
1
1
  # input-formatter
2
2
 
3
- Formats, masks, and reveals values written to an input element. Handles password reveal toggling and structured display formatting for credit cards, phone numbers, currencies, dates, and times.
3
+ Formats values written to an input element. Handles structured display formatting for credit cards, phone numbers, currencies, dates, and times.
4
4
 
5
5
  > When co-located with `input-combobox`, see [combobox.md](combobox.md) for the full event flow and wiring.
6
6
 
7
7
  ## Targets
8
8
 
9
- | Target | Element | Description |
10
- | -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
11
- | `input` | `<input>` or any element | Write destination — sets `.value` for `<input>`, `.textContent` otherwise |
12
- | `toggle` | `<button>` | Reveal/conceal button; hidden at connect when the formatter is not maskable |
13
- | `cell` | `<div>` (any element) | Optional character cells; when present, the canonical value is painted one character per cell, or (grouped mode — cell count equals `groups.length`) one group-sized slice per cell — see [character-cells](../plumber/character-cells.md) |
9
+ | Target | Element | Description |
10
+ | ------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
11
+ | `input` | `<input>` or any element | Write destination — sets `.value` for `<input>`, `.textContent` otherwise |
12
+ | `cell` | `<div>` (any element) | Optional character cells; when present, the canonical value is painted one character per cell, or (grouped mode — cell count equals `groups.length`) one group-sized slice per cell — see [character-cells](../plumber/character-cells.md) |
14
13
 
15
14
  ## Values
16
15
 
17
- | Value | Type | Default | Description |
18
- | ---------- | ------- | --------- | --------------------------------------------------------------------------------- |
19
- | `format` | String | `"plain"` | Formatter type — see [Formatters](#formatters) for valid identifiers |
20
- | `options` | Object | `{}` | Formatter-specific options (e.g. `{ locale: "en-US" }` for currency) |
21
- | `revealed` | Boolean | `false` | Whether a masked value is currently revealed; managed by `toggle()` |
22
- | `groups` | Array | `[]` | Cell group widths (e.g. `[4,4,4,4]`); overrides the formatter's own grouping hint |
16
+ | Value | Type | Default | Description |
17
+ | --------- | ------ | --------- | --------------------------------------------------------------------------------- |
18
+ | `format` | String | `"plain"` | Formatter type — see [Formatters](#formatters) for valid identifiers |
19
+ | `options` | Object | `{}` | Formatter-specific options (e.g. `{ locale: "en-US" }` for currency) |
20
+ | `groups` | Array | `[]` | Cell group widths (e.g. `[4,4,4,4]`); overrides the formatter's own grouping hint |
23
21
 
24
22
  ## Methods
25
23
 
26
- | Method | Wired via | Description |
27
- | ----------------- | ------------------------ | ---------------------------------------------------------------------------------------------- |
28
- | `format(value)` | — | Programmatic API — normalises, formats/masks, writes to `input` target, dispatches `formatted` |
29
- | `toggle()` | `data-action` | Action — flips `revealedValue`; no-op unless `format` is `"password"` or formatter is maskable |
30
- | `onChange(event)` | `input-combobox:changed` | Event adapter — extracts `event.detail.value`, calls `format(value)` |
31
- | `onPaste(event)` | `clipboard:pasted` | Event adapter — normalises and validates pasted text, calls `format(value)` |
32
- | `onInput(event)` | `input` DOM event | Event adapter — re-formats from the input's current value |
33
- | `onFocus(event)` | `focus` DOM event | Event adapter — redraws cells so the caret cell appears |
34
- | `onBlur(event)` | `blur` DOM event | Event adapter — redraws cells so the caret cell clears |
24
+ | Method | Wired via | Description |
25
+ | ----------------- | ------------------------ | ---------------------------------------------------------------------------------------- |
26
+ | `format(value)` | — | Programmatic API — normalises, formats, writes to `input` target, dispatches `formatted` |
27
+ | `onChange(event)` | `input-combobox:changed` | Event adapter — extracts `event.detail.value`, calls `format(value)` |
28
+ | `onPaste(event)` | `clipboard:pasted` | Event adapter — normalises and validates pasted text, calls `format(value)` |
29
+ | `onInput(event)` | `input` DOM event | Event adapter — re-formats from the input's current value |
30
+ | `onFocus(event)` | `focus` DOM event | Event adapter — redraws cells so the caret cell appears |
31
+ | `onBlur(event)` | `blur` DOM event | Event adapter — redraws cells so the caret cell clears |
35
32
 
36
33
  ## Dispatches
37
34
 
@@ -45,7 +42,6 @@ Formats, masks, and reveals values written to an input element. Handles password
45
42
  | `type` | Description |
46
43
  | -------------- | ------------------------------------------------------------------------------------------------------------------ |
47
44
  | `"plain"` | No-op — passes the value through unchanged |
48
- | `"password"` | Switches `input[type]` between `"password"` and `"text"` on reveal |
49
45
  | `"creditCard"` | Groups digits as `#### #### #### ####` |
50
46
  | `"phone"` | Formats as a local phone number |
51
47
  | `"currency"` | Locale-aware thousands separator and decimal places |
@@ -67,21 +63,6 @@ Formatter.register('iban', {
67
63
 
68
64
  ## Examples
69
65
 
70
- ### Password reveal
71
-
72
- ```html
73
- <div data-controller="input-formatter" data-input-formatter-format-value="password">
74
- <input type="password" data-input-formatter-target="input" />
75
- <button
76
- type="button"
77
- aria-label="Show password"
78
- aria-pressed="false"
79
- data-input-formatter-target="toggle"
80
- data-action="click->input-formatter#toggle"
81
- ></button>
82
- </div>
83
- ```
84
-
85
66
  ### Credit card formatting
86
67
 
87
68
  ```html
@@ -150,6 +131,4 @@ dash) are authored HTML, never inserted by the plumber — see
150
131
 
151
132
  ## Accessibility
152
133
 
153
- - Password `type` attribute switches between `"password"` (masked) and `"text"` (revealed), so screen readers announce the field type correctly.
154
- - See [ARIA.md's Password Reveal pattern](../../../ARIA.md) for the `toggle` button's `aria-label`/`aria-pressed` requirements.
155
134
  - Cell display: see [ARIA.md's Code Input pattern](../../../ARIA.md).
data/vendor/controller/docs/input-revealable.md ADDED
@@ -0,0 +1,65 @@
1
+ # input-revealable
2
+
3
+ Reveals or conceals an obscured `<input>` by switching its `type` between `"password"` and `"text"`.
4
+
5
+ ## Targets
6
+
7
+ | Target | Element | Description |
8
+ | ------------- | ---------- | --------------------------------------------------------------- |
9
+ | `input` | `<input>` | Obscured input; markup must initially declare `type="password"` |
10
+ | `toggle` | `<button>` | Reveal/conceal button |
11
+ | `revealIcon` | `<svg>` | Icon shown while the next action is reveal |
12
+ | `concealIcon` | `<svg>` | Icon shown while the next action is conceal |
13
+
14
+ Supply both icons or neither — a lone icon stays visible and only the `aria-label` swaps.
15
+
16
+ ## Values
17
+
18
+ | Value | Type | Default | Description |
19
+ | -------------- | ------- | ------- | --------------------------------------------- |
20
+ | `revealed` | Boolean | `false` | Whether the input is revealed |
21
+ | `revealLabel` | String | `""` | Toggle label while the next action is reveal |
22
+ | `concealLabel` | String | `""` | Toggle label while the next action is conceal |
23
+
24
+ ## Methods
25
+
26
+ | Method | Wired via | Description |
27
+ | ---------- | ------------- | --------------------- |
28
+ | `toggle()` | `data-action` | Flips `revealedValue` |
29
+
30
+ ## Readonly secret
31
+
32
+ ```html
33
+ <div
34
+ data-controller="input-revealable"
35
+ data-input-revealable-reveal-label-value="Show API key"
36
+ data-input-revealable-conceal-label-value="Hide API key"
37
+ >
38
+ <input
39
+ type="password"
40
+ readonly
41
+ value="sk_live_example"
42
+ autocomplete="off"
43
+ data-1p-ignore
44
+ data-lpignore="true"
45
+ data-input-revealable-target="input"
46
+ />
47
+ <button
48
+ type="button"
49
+ aria-label="Show API key"
50
+ data-input-revealable-target="toggle"
51
+ data-action="click->input-revealable#toggle"
52
+ >
53
+ <svg data-input-revealable-target="revealIcon" aria-hidden="true"></svg>
54
+ <svg data-input-revealable-target="concealIcon" aria-hidden="true" hidden></svg>
55
+ </button>
56
+ </div>
57
+ ```
58
+
59
+ `type="password"` triggers password-manager heuristics. Suppress them in your own markup with `autocomplete="off"`, `data-1p-ignore`, and `data-lpignore="true"` — the controller does not set these.
60
+
61
+ Non-input elements (`<output>`, `<span>`, table cells) are unsupported. Server-render both states and swap them with `setHidden`.
62
+
63
+ ## Accessibility
64
+
65
+ See [ARIA.md's Password Reveal pattern](../../../ARIA.md) for the toggle button's accessible-name requirements.
data/vendor/controller/manifest.json CHANGED
@@ -464,7 +464,6 @@
464
464
  "identifier": "input-formatter",
465
465
  "targets": [
466
466
  "input",
467
- "toggle",
468
467
  "cell"
469
468
  ],
470
469
  "values": {
@@ -476,10 +475,6 @@
476
475
  "type": "Object",
477
476
  "default": {}
478
477
  },
479
- "revealed": {
480
- "type": "Boolean",
481
- "default": false
482
- },
483
478
  "groups": {
484
479
  "type": "Array",
485
480
  "default": []
@@ -489,10 +484,8 @@
489
484
  "classes": [],
490
485
  "actions": [
491
486
  "attachCells",
492
- "cellsValue",
493
487
  "detachCells",
494
488
  "drawCells",
495
- "drawToggle",
496
489
  "format",
497
490
  "isFull",
498
491
  "onBlur",
@@ -502,14 +495,43 @@
502
495
  "onInput",
503
496
  "onPaste",
504
497
  "primeFilledState",
505
- "readValue",
506
- "toggle"
498
+ "readValue"
507
499
  ],
508
500
  "dispatches": [
509
501
  "filled",
510
502
  "formatted"
511
503
  ]
512
504
  },
505
+ "input-revealable": {
506
+ "identifier": "input-revealable",
507
+ "targets": [
508
+ "input",
509
+ "toggle",
510
+ "revealIcon",
511
+ "concealIcon"
512
+ ],
513
+ "values": {
514
+ "revealed": {
515
+ "type": "Boolean",
516
+ "default": false
517
+ },
518
+ "revealLabel": {
519
+ "type": "String",
520
+ "default": ""
521
+ },
522
+ "concealLabel": {
523
+ "type": "String",
524
+ "default": ""
525
+ }
526
+ },
527
+ "outlets": [],
528
+ "classes": [],
529
+ "actions": [
530
+ "draw",
531
+ "toggle"
532
+ ],
533
+ "dispatches": []
534
+ },
513
535
  "modal": {
514
536
  "identifier": "modal",
515
537
  "targets": [
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: stimulus_plumbers
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.4.11
4
+ version: 0.4.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - Ryan Chang
@@ -74,6 +74,7 @@ files:
74
74
  - lib/stimulus_plumbers/components/avatar.rb
75
75
  - lib/stimulus_plumbers/components/button.rb
76
76
  - lib/stimulus_plumbers/components/button/group.rb
77
+ - lib/stimulus_plumbers/components/button/icon_layout.rb
77
78
  - lib/stimulus_plumbers/components/button/slots.rb
78
79
  - lib/stimulus_plumbers/components/calendar.rb
79
80
  - lib/stimulus_plumbers/components/calendar/turbo.rb
@@ -211,6 +212,7 @@ files:
211
212
  - vendor/controller/docs/flipper.md
212
213
  - vendor/controller/docs/input-clearable.md
213
214
  - vendor/controller/docs/input-formatter.md
215
+ - vendor/controller/docs/input-revealable.md
214
216
  - vendor/controller/docs/modal.md
215
217
  - vendor/controller/docs/panner.md
216
218
  - vendor/controller/docs/popover.md