@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.
- package/content/accessibility.mdx +11 -4
- package/content/localization.mdx +3 -3
- package/content/metrics.mdx +223 -223
- package/content/overlays.mdx +17 -6
- package/content/state-and-control.mdx +7 -5
- package/dist/sources.generated.js +261 -241
- package/package.json +9 -9
package/content/overlays.mdx
CHANGED
|
@@ -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"`.
|
|
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
|
|
87
|
-
|
|
88
|
-
|
|
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
|
|
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
|
|
110
|
-
`<input value="Ada">`
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
`
|
|
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
|
|