0.15.0

Added

• Publish the JavaScript hooks as ES modules, on npm as @woylie/doggo and in
  the Hex package under assets/js. See the README for both install routes.
• Add hooks and keyboard support for the accordion, combobox, menu,
  menu_bar, menu_button, modal, alert_dialog, split_pane, tabs,
  toolbar, action_bar, tooltip, tree and tree_item components.
• Add a labelledby attribute to all components that take a label.

Alert component

• Add a :close slot for the content of the close button.
• Add an :action slot.

Callout component

• Add an :action slot.

Carousel component

• Add a loop attribute, default true. With loop={false}, the first and
  last slide don't wrap around.
• Add a rotation_interval_ms attribute, default 5000.
• Add Home and End key handlers to the pagination, which move to the first
  and last slide.

Combobox component

• Support options written as keyword lists and maps, with description and
  disabled keys, and support option groups and :hr separators.
• Add a display_value attribute to set the text shown for the selected value.
• Add an on_search attribute to filter the options on the server instead of in
  the browser.
• Add free_text and free_text_label attributes, which let the user submit
  what they typed when it is not among the options.
• Add a clearable attribute, which renders a button that unselects, and a
  clear_label attribute for its accessible name.
• Add :clear and :toggle slots for the content of the two buttons.
• Add an example stylesheet.

Field component

• Add an :extra_types builder option for rendering a type with your own
  component.
• Add a hidden_input attribute to omit the hidden input that submits false
  for an unchecked checkbox.
• Support nested options in the checkbox-group and radio-group types.
• Support options written as keyword lists, and support option descriptions.

Split pane component

• Make the panes resizable by dragging the separator or by moving it with the
  keyboard.

Tabs component

• Add an orientation attribute.

Tree item component

• Add expanded and selected attributes.

Changed

• Require a label or a labelledby on the bottom_navigation, breadcrumb,
  steps, tab_navigation and vertical_nav components, and remove the
  default labels of breadcrumb, steps and tab_navigation.
• Reject a blank label or labelledby.
• Require the id attribute of the vertical_nav, menu, menu_bar,
  toolbar, action_bar and tree components.
• Raise the maturity level of sixteen components from experimental to
  developing, most of them because they gained their hook and keyboard support
  in this release: action_bar, combobox, drawer, menu, menu_bar,
  menu_button, menu_group, menu_item, menu_item_checkbox,
  menu_item_radio_group, radio_group, split_pane, switch, toolbar,
  tree and tree_item.

Alert component

• Change the type of the close_label attribute to :string.
• Remove the click handler from the root element.

Alert dialog and modal components

• Use showModal() to open dialogs to provide proper modal semantics. This adds
  support for the CSS ::backdrop pseudo element and ensures scroll locking
  without relying on CSS or JS.
• Close dialogs with the closedby attribute.
• Support the Invoker Commands API.
• Remove the modal-container and alert-dialog-container element.

App bar component

• Require the label attribute of the :navigation and :action slots.
• Set aria-label on the :navigation and :action links.

Bottom navigation component

• Require the label attribute of the :item slot.

Button and toggle button components

• Default the disabled attribute to false instead of nil.

Button link component

• Prevent activation of a disabled button_link. The link is now rendered
  without a destination and with role="link" and aria-disabled="true".
• Remove the data-disabled attribute. The state is expressed with
  aria-disabled instead.

Callout component

• Rename the default variant modifier to level.

Card component

• Rename the :main slot to :body.

Carousel component

• Replace the auto_rotation attribute with a :pause slot, which renders the
  button that stops and restarts the rotation. The rotation is enabled by the
  presence of the slot, so a rotating carousel always has a button to stop it,
  as WCAG 2.2.2 requires.
• Complete the tablist of the pagination: role="tablist" is set on the
  carousel-pagination element instead of a nested div, each button has an
  id, aria-selected and tabindex, and the slides are the tab panels the
  buttons select. The button contains a single span instead of two nested
  ones.
• Label the pagination buttons with the label of the slide they select.
  pagination_slide_label is only used for slides without a label.
• Set aria-live to off while the carousel rotates and to polite while it
  is stopped.
• Move the carousel by setting scrollLeft on the scroll container, so that the
  scroll-behavior property decides whether the movement is animated.
• Render no controls and no pagination if the carousel only has a single item.
  The item is a group instead of a tab panel then.
• Mark the component as developing.

Combobox component

• Render the listbox as a div with role="listbox" and each option as a div
  with role="option", instead of a ul with li elements.

Page header component

• Render the title and the subtitle in an hgroup instead of a div with the
  page-header-title class.

Property list component

• Require the :prop slot.

Tabs component

• Require the label attribute of the :panel slot.

Toolbar component

• Add an orientation attribute.

Vertical nav, vertical nav nested and navbar items components

• Change class attribute of the item slots to :any, so that a list of
  classes can be passed.

Removed

Combobox component

• Remove support for options written as {label, value, description} tuples.
  Write the option as a keyword list with a description key instead.

Fixed

Card component

• Render the main content as a div instead of a main element. A document may
  hold only one main, so a page of cards was invalid and exposed one main
  landmark per card.

Carousel component

• Scroll to the right slide if the slides have different widths, or if
  scroll-snap-align is not start. The scroll position was calculated from
  the width of the first slide.
• Render the pause button first and the pagination between the previous and next
  buttons, so that the tab order matches the visual order.
• Keep the carousel working after a LiveView patch that adds or removes slides.
  Buttons rendered by the patch did nothing, and the active slide could point at
  a slide that had been removed.
• Stop the rotation timer when the element is removed. It kept running against a
  detached element and held it from being collected.

Cluster component

• Remove the role="group" attribute from the cluster component.

Combobox component

• Mark the option holding the value as selected when the option values are not
  strings.
• Mark only the first option when several options hold the same value.
• Render an option with an empty value for nil and for an empty label, so that
  a blank option can be selected.

Field component

• Describe an errored field by its error text through aria-describedby in
  addition to aria-errormessage.
• Always render the error list as an aria-live="polite" region, so that an
  error that appears after load is announced.
• Render a field built without field assign from just a name and value.
• Render options given as keyword lists.

Frame component

• Default to a 1:1 ratio instead of raising when no ratio is given.

Image component

• Fix the storybook module passing an invalid ratio.

Page header component

• Add the missing on_click attribute to the :navigation slot.

Split pane component

• Clamp the aria-valuenow of the separator between min_size and max_size.

Tree item component

• Fix the expanded and collapsed state.

How to upgrade

• Replace [data-disabled] with [aria-disabled] in any styles you wrote for
  disabled button_link components.
• A disabled button_link no longer renders an href. Revisit any style or
  test that selects a.button[href].
• Add a :prop slot to any property_list that has none, or remove the
  component from that call site.
• Rename the :main slot of the card component to :body, and replace main
  with .card-body in any styles you wrote for it.
• Ensure to pass a label or labelledby attribute to every component that
  expects them.
• Set an id on every vertical_nav, menu, menu_bar, toolbar,
  action_bar and tree.
• Rename variant to level on the callout component if you use the
  defaults, and change [data-variant] to [data-level] in your CSS.
• Register the hooks of the components you build. See the README.
• Rewrite any styles that select the combobox listbox or its options as ul
  and li. They are div elements with role="listbox" and role="option"
  now.
• Rewrite combobox options given as {label, value, description} tuples as
  keyword lists with a description key.
• Remove the backdrop and scroll locking for the modal and alert_dialog
  components and style ::backdrop instead.
• Move any styles on .modal-container and .alert-dialog-container to the
  dialog element itself. The element is gone, and the dialog is the box now
  that it opens in the top layer.
• An empty .field-errors element is now part of the layout. See the Field
  error announcements section of the README for the CSS that removes it from
  the flow without removing it from the accessibility tree.
• Replace the auto_rotation attribute of the carousel component with a
  :pause slot.
• In carousel pagination styles, [role="tablist"] is now the
  carousel-pagination element itself rather than a child of it, and the dot is
  button > span rather than button > span > span.
• Set label on every :item of a carousel with pagination, since the
  pickers take their names from it. pagination_slide_label now applies only to
  slides without a label.
• A carousel with a single item renders no carousel-controls element
  anymore. Update your styles to account for its absence if necessary.