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.