@fusion.dev/helix-docs 0.145.0 → 0.146.0

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.
@@ -78,14 +78,16 @@ press `Escape` again.
78
78
 
79
79
  A modal overlay keeps `Tab` inside itself while it is open, and it returns focus
80
80
  to the element that opened it. `Dialog` does this, and so does `Drawer` unless
81
- you set `modal="false"`. The page behind a modal `Dialog` or `Drawer` does not
81
+ you set `modal="false"`. Set `dismissible` on either to draw a close control in
82
+ the corner by the title. The page behind a modal `Dialog` or `Drawer` does not
82
83
  scroll while it is open.
83
84
 
84
85
  Opening a `Popover` moves focus to the first control in its panel, or to the
85
86
  panel where it holds none, and closing it from inside gives focus back to the
86
- trigger. It does not trap focus unless you set `modal`, which keeps `Tab` in the
87
- panel until it closes. When focus moves out of its trigger and its panel, the
88
- popover closes.
87
+ trigger, however it closes, setting `open` included. It does not trap focus
88
+ unless you set `modal`, which keeps `Tab` in the panel until it closes and hides
89
+ the rest of the page from screen readers meanwhile. When focus moves out of its
90
+ trigger and its panel, the popover closes.
89
91
 
90
92
  Press F8 to move focus to the `Toast` stack, and press it again to go back.
91
93
  Set `hotkey` on the stack to use another key. The stack's name says which key
@@ -109,6 +111,9 @@ names it with `for`. A Helix trigger is described as soon as it has rendered.
109
111
  A plain element in your markup is described the first time a reader points at
110
112
  it or focuses it, so the link is never written into markup your server sent.
111
113
  Write `aria-describedby` yourself to have the link in the server's markup.
114
+ The pointer can move onto a tooltip's bubble and the bubble stays, so a reader
115
+ can read it under a magnifier. Set `hoverable="false"` to hide it once the
116
+ pointer reaches it.
112
117
 
113
118
  ## Keep an overlay open
114
119
 
@@ -143,9 +148,15 @@ finished. Select on them to draw an entrance or an exit of your own.
143
148
  A touch or a pen swipes a `Drawer` toward the edge it came from, and a `Toast`
144
149
  message toward the end of the line. A swipe past halfway, or a quick one, closes
145
150
  it through the same cancelable request as its close control. A `Drawer` with
146
- `snap-points` comes to rest at the nearest point, such as half open. In a
151
+ `snap-points` comes to rest at the nearest point, such as half open, and
152
+ `:state(snapped)` holds while it rests short of the whole panel. Moving focus
153
+ with `Tab` to a control past the edge of the window opens it the rest of the
154
+ way, and `snapTo()` moves it from script. In a
147
155
  `Lightbox`, a swipe across the viewer shows the next or the previous item. A
148
- mouse never swipes, because dragging with a mouse selects text.
156
+ mouse never swipes, because dragging with a mouse selects text. A `Lightbox`
157
+ with `max-zoom` also zooms: pinch the item, or double click or double tap it,
158
+ and drag it about once zoomed. It swipes only while the item is at its own
159
+ size.
149
160
 
150
161
  ## Choose an overlay
151
162
 
@@ -106,11 +106,13 @@ current value. The pair comes from the platform. A native input reflects its
106
106
  `value` *content attribute* to `defaultValue`, and it keeps a dirty flag. Once a
107
107
  user has typed, the flag stops the attribute from changing the value.
108
108
 
109
- **A form reset clears a `value` or `checked` you wrote in markup.** A native
110
- `<input value="Ada">` resets to `Ada`, and `<helix-input value="Ada">` resets to
111
- empty, because a Helix control resets to `default-value` and `default-checked`.
112
- Write the starting value of a form control as `default-value`, or
113
- `default-checked` for a checkbox or a switch.
109
+ **A form reset returns to a `value` or `checked` you wrote in markup**, as it
110
+ does on a native control: `<input value="Ada">` and `<helix-input value="Ada">`
111
+ both reset to `Ada`. Where `default-value` or `default-checked` is written, the
112
+ reset returns to that instead. The attribute is read at the reset, and a
113
+ framework that sets `value` as a property writes no attribute, so write the
114
+ starting value of a form control as `default-value`, or `default-checked` for a
115
+ checkbox or a switch, when a reset has to return to it.
114
116
 
115
117
  ## State is published as a custom state
116
118