slab-elements@0.3.1

Patch Changes

• #86 a866d14 Thanks @ynotdraw! - Adds Alert Dialog, slab-alert-dialog: a modal Dialog with role="alertdialog" for a question that needs an answer, such as confirming a delete. It has a built-in Cancel button that focus starts on, a description that's read with the label, and no light dismiss. Change the Cancel button's text with cancel-label, or with alertDialogCancel in registerStrings().

• #88 8c56b61 Thanks @ynotdraw! - Adds Date Picker, slab-date-picker: a Date Field with a button that opens a Calendar in a popover, so the picker looks and works the same in every browser and can be styled. Pick a day with the mouse or keyboard, or open it with Alt+ArrowDown from the input.

• #96 4f8ec31 Thanks @ynotdraw! - Adds Date Range Picker, slab-date-range-picker: a Date Range Field with a button that opens a range Calendar in a popover, so the start and end are picked in one calendar that looks and works the same in every browser and can be styled. Open it with the button or with Alt+ArrowDown from either input.

• #98 8a8486f Thanks @ynotdraw! - Adds Grid List, slab-grid-list and slab-grid-list-item: a list of rows that can hold their own buttons, links and checkboxes, like React Aria's GridList. Tab reaches it once, Up and Down move between rows, Left and Right move between a row and its controls, and Escape goes back to the row. Set selection-mode to "single" or "multiple" to select rows with a click, Space or Enter.

• #90 2e78fc6 Thanks @ynotdraw! - Hover Card points its anchor's aria-details at the card's content, so a screenreader can tell there's more about the anchor, and has a label attribute that makes the card a group named by it.

• #97 0e7020e Thanks @ynotdraw! - Menu has submenus. Put a slab-menu inside another with a slab-menu-item as its anchor, and it opens beside that Menu Item. The Right arrow, Enter, Space, a click, or resting the pointer on the Menu Item for a moment opens it. Left and Escape close it and return focus to its Menu Item, and a click on any Menu Item in it closes every Menu. In a right-to-left page, Left and Right swap.

• #87 1016b06 Thanks @ynotdraw! - Adds Search Field, slab-search-field: a native search input with a button that clears it, and Escape that clears it in every browser. It's form-associated like Text Field.

• #89 80636f5 Thanks @ynotdraw! - Adds Sortable List, slab-sortable-list and slab-sortable-list-item: a list the user puts in order by dragging each item's handle, or with Space, the arrow keys, Home and End. Screenreaders are told where an item is as it's picked up, moved, dropped or put back.

• #94 d9a5acd Thanks @ynotdraw! - Adds Table, slab-table, with slab-table-head, slab-table-body, slab-table-foot, slab-table-row, slab-table-column-header and slab-table-cell: a table that components can render rows and cells into, laid out like a native <table> with the same roles. A sortable Column Header is a button that sorts its column, sets aria-sort, dispatches "sort" and tells screenreaders how the column is sorted. Change what they're told with tableSorted in registerStrings().

• #85 9239b91 Thanks @ynotdraw! - Toggle Button is new: a native <button> with aria-pressed, for one setting that's on or off, such as Bold or Mute. A click, Space or Enter presses it or releases it.

• #99 699f5b2 Thanks @ynotdraw! - Listbox and Combobox have a virtual attribute for lists of thousands of Options. Only the Options in or near view are laid out, with spacers in place of the rest, while the keys, typeahead, filtering and selection still reach every Option. Rendered Options get aria-posinset and aria-setsize, and the active one stays in the accessibility tree when it's scrolled away from.

  Listbox and Combobox are also much faster with long lists whether or not they're virtual: they no longer do work for every Option each time one of them connects or changes, which made a thousand Options take seconds to appear.

slab-elements@0.3.0

Minor Changes

• #68 c39c01c Thanks @ynotdraw! - Splitter's separator holds a visually hidden range input, which is what's focused and what screenreaders read, so screenreaders on phones can move it with a swipe up or down. The separator is no longer a [role=separator] itself, so screenreaders read it as a slider, and since it isn't focused, it doesn't match :focus-visible: style its focus ring through its new focus-visible part, as in ::part(separator focus-visible).

Patch Changes

• #74 0479423 Thanks @ynotdraw! - With range, Calendar tells screenreaders when the first day picked starts the range, and what the range is once the last is picked. Change what it says with rangeStartedLabel and rangeSelectedLabel.

• #71 2eb7fb7 Thanks @ynotdraw! - The styled Checkbox's box is 24 pixels square rather than 22, the smallest target size WCAG 2.5.8 allows.

• #70 dce96a7 Thanks @ynotdraw! - Color Picker's area-thumb, hue-thumb and alpha-thumb parts are listed in the elements manifest again, so editors and the docs show them.

• #72 2ab652b Thanks @ynotdraw! - Command Palette tells screenreaders how many Options are left once typing pauses, the way Combobox does. Set resultsLabel to change what it says. With none left, what's slotted into empty is announced instead, as before, or "No results" when nothing is.

• #75 e1dd766 Thanks @ynotdraw! - Disclosure has a heading-level attribute that makes its label a heading of that level, as the APG's accordion puts each header in one.

• #73 a12cd3d Thanks @ynotdraw! - File Drop tells screenreaders what a drop did: how many files were added, how many were left out for not matching accept, and when a drop of several files was ignored without multiple. Change what it says with addedLabel, notAcceptedLabel and too-many-label.

• #79 b293bab Thanks @ynotdraw! - Meter has a formatValue property, a function of the value whose result screenreaders read instead of the bare number, such as "3 of 5 GB".

• #76 83653c5 Thanks @ynotdraw! - Popover has a label attribute that makes it a non-modal dialog named by the label, with aria-haspopup="dialog" on its anchor, for a popover that holds a form or controls rather than a few words.

• #80 585778a Thanks @ynotdraw! - Progress has a formatValue property, a function of the value whose result screenreaders read instead of a percentage, such as "3 of 10 files".

• #78 14d0e01 Thanks @ynotdraw! - Range Slider has a formatValue property, a function of a thumb's value whose result screenreaders read instead of the bare number, such as "$40".

• #69 5bfb767 Thanks @ynotdraw! - Range Slider's start and end parts are listed in the elements manifest again, so editors and the docs show them.

• #81 a36f03d Thanks @ynotdraw! - Rating has a formatValue property, a function of each radio's number that names it, such as "3 stars" rather than "3".

• #77 bc5bc57 Thanks @ynotdraw! - Slider has a formatValue property, a function of the value whose result screenreaders read instead of the bare number, such as "$40".

slab-elements@0.2.0

Minor Changes

• #63 95ef80a Thanks @ynotdraw! - Color Picker's thumbs each hold a visually hidden range input, which is what's focused and what screenreaders read, so screenreaders on phones can adjust them with a swipe up or down. The area has a second one for its brightness, "Brightness" after label, left out of the tab order. The thumbs are no longer [role=slider]s themselves, and since they aren't focused, they don't match :focus-visible: style a thumb's focus ring through its new focus-visible part, as in ::part(hue-thumb focus-visible).

• #62 ac4b5b8 Thanks @ynotdraw! - Range Slider's thumbs each hold a visually hidden range input, which is what's focused and what screenreaders read, so screenreaders on phones can adjust them with a swipe up or down. The thumbs are no longer [role=slider]s themselves, and since they aren't focused, they don't match :focus-visible: style a thumb's focus ring through its new focus-visible part, as in ::part(start focus-visible).

Patch Changes

• #61 62c9ae5 Thanks @ynotdraw! - Combobox now tells screenreaders how many Options are left once typing pauses ("No results", "1 result", "3 results"), and which tag was removed when multiple is set. Before, filtering and removing a tag happened silently. Both messages can be replaced, through resultsLabel and removedLabel.

• #52 03477ce Thanks @ynotdraw! - aria-* attributes on a component's host now reach the element a screenreader reads, such as Text Field's <input> or Disclosure's <summary>, in Checkbox, Color Picker, Combobox, Date Field, Disclosure, File Drop, Number, Pin Input, Range Slider, Slider, Switch, Text Field, Textarea and Time Field. Before, an aria-label or aria-describedby you put on the host went unread, and so did the description Tooltip gives its anchor and the aria-expanded Popover and Menu give theirs when the anchor was one of these. ID references, such as aria-describedby, are resolved where the host is and kept in step as they change.

• #53 e959074 Thanks @ynotdraw! - Carousel's autoplay no longer rotates when the user prefers reduced motion, and it stops for good once focus moves into the carousel, as the APG's carousel does, rather than starting again when focus leaves. The rotation button starts it in either case.

• #45 956ac66 Thanks @ynotdraw! - Adds Command Palette, slab-command-palette: a modal search for commands. It's Dialog, with a Combobox's <input role="combobox"> and a listbox of slotted Options inside, so it has Dialog's open, show(), close(), closedby, label, focus trap and "cancel" and "close". Opening it empties the input and focuses it. Typing filters the Options by filter, a case-insensitive substring of their text by default, and makes the first match active, so Enter runs the best one. Up and Down move the active Option. Enter or a click closes the palette with the chosen Option's value as returnValue. A Close button beside the input closes it without choosing, which matters on phones where closedby="any" isn't supported, and the close slot changes what it says. Closing it any way other than choosing leaves returnValue empty. query is what's been typed, and the input's "input" leaves the host, for fetching results as the user types. When nothing matches, the listbox is hidden, the host matches :state(empty), and the empty slot is shown in a status region. Style it through ::part(dialog), ::part(label), ::part(input), ::part(close), ::part(listbox) and ::part(empty).

• #42 79651cb Thanks @ynotdraw! - Adds Copy Button, slab-copy-button: a native <button> that writes text to the clipboard when it's pressed. It copies value, or, with from, the value or rendered text of the element with that id at the moment it's pressed, so a code block or an input can be copied without keeping value in step. Once copied, copied-label ("Copied") is announced from a status beside the button, the host matches :state(copied) for feedback-duration (2000ms by default), and "copied" is dispatched. When the clipboard refuses, as it does in a page that isn't served securely, failed-label is announced, the host matches :state(failed), and "copy-error" is dispatched instead. Style it through ::part(button), :state(copied) and :state(failed).

• #36 837aa4e Thanks @ynotdraw! - Adds Date Range Field, slab-date-range-field: two native date inputs, a start and an end, for picking the first and last days of a range. Each input's bound is the other's value, so a browser's picker won't offer an end before the start, and an end typed before it is rangeUnderflow and rangeOverflow, as a date outside min and max is on a single input. start-value and end-value are ISO "yyyy-mm-dd" strings, and the form gets both under name, the start and then the end. The group is named by label, and each input by it and start-label or end-label, "Start" and "End" unless you set them. Style it through its parts and :state(disabled), :state(error), :state(readonly) and :state(required).

• #41 d257c59 Thanks @ynotdraw! - Adds Editable, slab-editable: text that's edited in place, such as a title or a name. It's a native button showing the value, named by label and then the value, that becomes a native input when it's pressed, with the text selected. Enter commits what's typed and Escape discards it, and both put focus back on the button. Moving focus away commits it too. value is the last committed value, and it's what the form gets under name. "change" is dispatched when an edit is committed with a different value. edit(), commit() and cancel() do what the keys do, and editing says which is showing. While it's empty, the button shows placeholder. Style it through ::part(preview), ::part(input), ::part(label) and ::part(description), and :state(disabled), :state(editing) and :state(empty).

• #40 5b24c72 Thanks @ynotdraw! - Adds Feed, slab-feed: the APG's feed, a [role=feed] of articles that grows as the user scrolls, like a timeline. Each slotted element is an article, put in the tab sequence and given aria-posinset and aria-setsize, so a screenreader says where it is. It's a [role=article] unless it's an <article> or has a role, and it's named by its first heading unless it has a name. Page Down and Page Up move focus to the next and previous article from anywhere in one, and Control+End and Control+Home move focus to what's after and before the feed. Loading is yours: add articles and set busy while you do. total is how many articles there are in all, or -1 when that's unknown, and the number there are now when unset. The feed is named by label. Style it through ::part(feed).

• #54 b03c6ab Thanks @ynotdraw! - Field now describes its control by what's slotted into description, through the control's aria-describedby, after any IDs it already has, and sets the control's aria-invalid while error is set. Before, a screenreader read neither the hint nor the error, nor that the control was invalid.

• #51 57f1c76 Thanks @ynotdraw! - Color Picker keeps the colors being picked from in forced colors, such as Windows' contrast themes. Before, the browser painted the area, the hue and alpha sliders and every swatch in the user's background color, so there was nothing to pick from.

• #56 e61e570 Thanks @ynotdraw! - Checkbox Group and Radio Group now tell screenreaders when they're invalid. Radio Group sets aria-invalid on its radiogroup. A group role can't take aria-invalid, so Checkbox Group sets it on each of its Checkboxes instead. Both follow the Gr...

slab-elements@0.1.3

Patch Changes

• #18 50c1b2b Thanks @ynotdraw! - Adds range to Calendar, slab-calendar, to select a range of days rather than one. The first day picked starts the range and the second ends it, in either order, and "change" is dispatched once both are. value is then the range as "yyyy-mm-dd/yyyy-mm-dd", the ISO 8601 form of an interval. While the range is being picked, the days from the first to the one focused or hovered are ::part(preview), and Escape starts over. The range's days are ::part(selected) and its ends ::part(range-start) and ::part(range-end), and the grid is aria-multiselectable.

• #25 3b2a7a6 Thanks @ynotdraw! - Adds Carousel, slab-carousel: a region of slides, following the APG carousel pattern. The slides are a CSS scroll snap container, so swiping, scrolling and the arrow keys move between them natively in every browser. Previous and Next, a marker per slide, and a rotation button when autoplay is set are real buttons, rather than the ::scroll-button() and ::scroll-marker pseudo-elements only Chromium has, so they're named and styled the same everywhere. index is the current slide's, loop wraps Previous and Next, and autoplay moves on every interval milliseconds, pausing while the carousel is hovered or focused. Slides out of view are inert. Style it through its parts and :state(first), :state(last) and :state(rotating).

• #27 343b01e Thanks @ynotdraw! - Adds Color Picker, slab-color-picker: a saturation and brightness area, a hue slider, an alpha slider with alpha, a hex field, and swatches from swatches. The area and the sliders are [role=slider]s, stepped with the arrow keys, Page Up and Page Down, and Home and End, or dragged, and the swatches are a listbox whose selection follows focus. value is a lowercase "#rrggbb", or "#rrggbbaa" with alpha, and the form gets it under name. Style it through its parts, :state(disabled) and :state(dragging), and the --color-picker-hue, --color-picker-opaque and --color-picker-value custom properties it sets.

• #26 a89eecd Thanks @ynotdraw! - Adds Context Menu, slab-context-menu: Menu's Menu Items in a [role=menu] popover that opens over whatever is slotted into target, in place of the browser's own menu. It opens at the pointer on a right-click or Control-click, where it was pressed on a long-press with a finger or a pen, and below what has focus on Shift+F10 or the Menu key. It's kept on screen, flipping up or back when there isn't room, and it has Menu's keyboard. Prevent the default of a "contextmenu" in part of the target to keep it from opening there. Style it through its parts and :state(open).

• #22 6e62e79 Thanks @ynotdraw! - Adds Menubar, slab-menubar: a row of Menus, such as File, Edit and View, following the APG menubar pattern. Each Menu's anchor becomes a [role=menuitem] in a [role=menubar] with a roving tabindex, so Tab reaches it once and Left, Right, Home and End move between the anchors. While a Menu is open, Left and Right close it and open the one beside it, and pointing at another anchor does the same. Opening, closing and moving through each Menu's items is Menu's own. Style it through ::part(menubar).

• #24 84dab08 Thanks @ynotdraw! - Adds Pin Input, slab-pin-input: a PIN or one-time code field as a row of native inputs, one per character, that reads and submits as one value. Typing moves to the next input and Backspace moves back. A pasted or autofilled code, such as one offered by autocomplete="one-time-code", is spread across the inputs, with separators like "-" left out. length sets how many characters, type="alphanumeric" accepts letters as well as digits, and mask hides them. An empty required field is valueMissing and a partly filled one tooShort, and "complete" is dispatched when every input is filled. Style it through its parts and :state(complete), :state(disabled), :state(error), :state(readonly) and :state(required).

• #17 8e62a14 Thanks @ynotdraw! - Adds Range Slider, slab-range-slider: a two-thumb slider for picking a range, following the APG multi-thumb slider pattern. Each thumb is a [role=slider] bounded by the other, so they can meet but not pass. start-value and end-value are the range, clamped to min and max and snapped to step, and the form gets both under name. Drag a thumb, press the track to bring the nearer one there, or use the arrow keys, Page Up and Page Down, and Home and End. Style it through its parts and :state(disabled) and :state(dragging).

• #23 f02861a Thanks @ynotdraw! - Adds Rating, slab-rating: a row of native radios, one for each point from 1 to max (5 by default), in a [role=radiogroup] named by label. value is the checked radio's number, and the form gets it under name. With step="0.5", there are two radios to a star, one for each half, which are ::part(start) and ::part(end). It's form-associated, with required, setCustomValidity(), setValidity() and a validity message, as on Radio Group. Each radio is ::part(star), and those up to the value are ::part(filled) too. While the pointer is over a radio, those up to it are filled instead, and the host is :state(previewing). Style it through its parts and :state(disabled), :state(error), :state(previewing) and :state(required).

• #19 137b3f7 Thanks @ynotdraw! - Splitter's separator no longer scrolls the page when it's dragged in Safari on iOS. It cancels "touchstart" while it isn't disabled, since touch-action: none alone doesn't stop the scroll there.

• #15 0e4f9e6 Thanks @ynotdraw! - Adds Splitter, slab-splitter: two panes, in its "primary" and "secondary" slots, with a [role=separator] between them that resizes them, following the APG window splitter pattern. Drag the separator, or move it with the arrow keys by step, Home and End to min and max, and Enter to collapse the primary pane and restore it. value is the primary pane's share as a percentage, and orientation="horizontal" stacks the panes. Style it through its parts and :state(collapsed), :state(disabled) and :state(dragging).

• #14 d434e2c Thanks @ynotdraw! - Adds Time Field, slab-time-field: a time field around a native <input type="time">, with the same API as Date Field. Its value is a 24-hour "hh:mm" string whatever clock the browser shows, and min, max, step and required validate the way they do on the input, including a max earlier than min for a range across midnight.

slab-elements@0.1.2

Patch Changes

• #11 e5b3ee2 Thanks @ynotdraw! - Combobox takes multiple. Each selected Option is shown before the input as a tag, a button that removes it, and choosing an Option toggles it and leaves the listbox open. Backspace in an empty input removes the last tag, and Left at the start of the input moves to the tags. values reads and sets every selected value, in the order they were chosen, and each is submitted as its own entry, as a <select multiple> submits them. Style the tags with ::part(tag) and ::part(tags), and name their buttons with removeLabel.

• #9 7c4e2c7 Thanks @ynotdraw! - Adds Toggle Group, slab-toggle-group, and its slab-toggle-group-button: a row of toggle buttons that Tab reaches once and the arrow keys move between. One button is pressed at a time, or several with multiple. Set pressed on a button that starts out pressed; the group handles aria-pressed. value and values read and set which are pressed.

slab-elements@0.1.1

Patch Changes

• #5 719cb17 Thanks @ynotdraw! - The package now includes its custom elements manifest. Tools that read "customElements" from package.json, such as IDE plugins, Storybook and linters, can find every component's attributes, properties, events, slots, CSS parts and custom properties. It's at slab-elements/custom-elements.json.