@harmonics/lattice-ui 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 `@harmonics/lattice-ui` follows semantic versioning; while it is `0.x`, a minor version may change
 an element's inputs, events or tokens, and says so here.
 
+## 0.7.0
+
+- `<lattice-shape pressable>`: a button shaped like itself, in the tab order, named by its
+  `label`; a click on its faces, Enter or Space fires `press`. `pressed` makes it a toggle the page
+  sets; `disabled` stops it. It lifts under the pointer and sinks while pressed, and its focus ring
+  runs round its outline. Without `pressable`, a shape is what it was.
+- `<lattice-icon>` draws five more marks: `note`, and the board's actions `turn`, `glue`, `apart`
+  and `bin`. Each path is a part, named in the README.
+- Additive: nothing in 0.6.0 changes.
+
 ## 0.6.0
 
 - `<lattice-board>`, in `@harmonics/lattice-ui/board`: a surface of lattice pieces a person drags,

package/README.md

@@ -71,7 +71,10 @@ of the tree's woods.
 | `tone` | 0–7 | `0` | 0–4 the tree's woods, 5 good fruit, 6 bitter, 7 untasted |
 | `lift` | number | `8` | How high it stands, in lattice units |
 | `scale` | number | `1` | 1 is the tree's own size: a cell 76 pixels across |
-| `label` | string | | Without one it is hidden from screen readers |
+| `label` | string | | Without one it is hidden from screen readers; when pressable, its name |
+| `pressable` | boolean | `false` | A button shaped like itself (below) |
+| `pressed` | boolean | unset | Makes a pressable shape a toggle (`aria-pressed`); the page sets it |
+| `disabled` | boolean | `false` | A pressable shape that cannot be pressed, out of the tab order |
 
 A part is a cell `{ kind: "cell", at: { q, r } }` on the axial hex grid, or a triangle
 `{ kind: "tri", at: { i, j, k } }` (corner `i, j` of the triangle grid, `k` 0 pointing right, 1
@@ -84,6 +87,22 @@ shape.parts = [
 ];
 ```
 
+With `pressable` it is a button shaped like itself, for a palette of woods, a picker of shapes or
+a button that is a shape. It is in the tab order with `role="button"` and its `label` as its name
+(one without a label warns in the console). A click on its faces, Enter, or Space (on release)
+fires `press`, `{ shape, parts }`. Only its faces take the pointer: a press in the gap round a
+hexagon's corner goes to whatever is under it. It stands a little higher under the pointer and
+sinks to half its lift while pressed, or while `pressed`; the keyboard's ring runs round its own
+outline, and a `pressed` one keeps a quiet ring, so a palette shows which is picked by more than
+its depth. The shape never presses itself: keep one `pressed` in a palette from `press`.
+
+```js
+for (const swatch of swatches)
+  swatch.addEventListener("press", () => {
+    for (const s of swatches) s.pressed = s === swatch;
+  });
+```
+
 ### `<hex-sky>`
 
 The tree's sky, its hexagon lattice drawn faint over it, filling the element. Size it as any block.
@@ -119,8 +138,22 @@ see [Cutting](#cutting).
 
 ### `<lattice-icon>`
 
-`name="shears"` or `name="done"`, in the text's colour, a step square
-(`--lattice-icon-size` to change it). Hidden from screen readers unless it has a `label`.
+One of the tree's marks (`ICON_NAMES`), in the text's colour, a step square
+(`--lattice-icon-size` to change it). Hidden from screen readers unless it has a `label`. Every
+mark is drawn from the lattice's pieces: hexagons, triangles and diamonds, every line upright or
+at 30°.
+
+| `name` | | Parts |
+|---|---|---|
+| `shears` (default) | two hexagon handles, two diamond blades crossing | `shears-handle`, `shears-blade` |
+| `done` | a check in a hexagon | `done-cell`, `done-check` |
+| `note` | a hexagon with two lines of writing | `note-cell`, `note-line` |
+| `turn` | a hexagon open at one side, a triangle pointing on round (R) | `turn-path`, `turn-arrow` |
+| `glue` | two cells sharing a heavy side (G) | `glue-cell`, `glue-seam` |
+| `apart` | two cells with a gap (Shift+G) | `apart-cell` |
+| `bin` | a cup under a diamond lid (Delete) | `bin-can`, `bin-rib`, `bin-lid` |
+
+The last four are `<lattice-board>`'s keyboard actions, for a page that gives each a button.
 
 ## Board
 
@@ -197,9 +230,9 @@ The ones the elements use:
 | `--space-tree-2`, `--space-tree-4` | how far a face sinks; an icon's size |
 
 Each element also exposes its drawing as a part: `::part(face)`, `::part(shape)`, `::part(sky)`,
-`::part(trail)`, `::part(icon)`. A mark's own paths are parts too, for a hover that recolours
-them: `lattice-icon::part(done-cell)`, `::part(done-check)`, `::part(shears-blade)`,
-`::part(shears-handle)`.
+`::part(trail)`, `::part(icon)`, `::part(board)`, and a shape's focus ring `::part(ring)`. A
+mark's own paths are parts too (see `<lattice-icon>`), for a hover that recolours them:
+`lattice-icon::part(done-cell)`.
 
 ## Frameworks