[email protected]

Minor Changes

• 593a21a: feat: add Announcer custom element

  • Use the Announcer element to politely announce changes to screen readers. View documentation
  • In addition, the following interactive elements now announce changes to screen readers through the use of the Announcer
    • Base - creates a shared Announcer element for all elements to utilize, announce a message with the announce method
    • Copy and Share - announces text has been successfully copied
    • TableSort - announces the column and sort order upon sort
    • WakeLock - announces when the wake lock is activated/deactivated

Patch Changes

• 9005bfa: types: export trigger attribute helper types

  • EditorTriggerAttributes
  • TableSortTriggerAttributes

• 00c2e26: a11y: TableSort - add role, tabindex, and default event listeners for keyboard navigation

• 593a21a: qol: in drab/{element}/define modules, check to see if the element is already defined before defining

  Instead of this:

  if (!customElements.get("drab-dialog")) {
  	await import("drab/dialog/define");
  }

  The check happens inside the define module, so this can be imported without checking if the element is defined first.

  await import("drab/dialog/define");

[email protected]

Major Changes

• 9a625ed: v6.0

  Version 6 optimizes the library in a variety of ways and removes some elements that are no longer necessary due to advances in CSS.

  drab has a new documentation site with a styles section that is a reference for how to create components with HTML. The removed Details and Popover elements now live in this section since they do not require JavaScript to be created.

  Breaking changes

  Overall

  • Attribute types no longer include every method on the JS element, only the attributes you can set on it.
  • Only unbundled ESM is published to npm now. IIFE files are no longer published, CDNs like jsdelivr already take care of the bundling and minification for users who want to just use a script tag.

  Elements

  Animate

  • This element has been removed in favor of CSS animations, with starting-style and discrete animations, it's now possible to animate from display: none, making the animations within drab obsolete. This greatly reduces the bundle size of the package and removes the odd animation attribute syntax.

  Base

  • swapContent now takes one argument - revert set to the delay in ms or false to not revert back to the old content.

  Breakpoint

  • The Breakpoint element has been removed, the same information can easily be found in dev tools.

  Details

  • The Details element has been removed, it's now possible to animate entirely with CSS. See the style example here.

  Fullscreen

  • #fullscreenSupported is now a private method.

  Popover

  • The Popover element has been removed, it's now possible to animate entirely with CSS. See the style example here.

  Patch changes

  • Export attributes as type
  • Add override to methods that override the base/animate
  • Refactor define all to use Object.entries

5.4.2

Full Changelog: 5.4.1...5.4.2

• fix: Dialog - removes unnecessary getters and setters for smaller bundle size.

5.4.1

Full Changelog: 5.4.0...5.4.1

• feat: Dialog now adjusts for scrollbar width when remove-body-scroll is set to prevent jank.

5.4.0

Dialog

• adds the remove-body-scroll attribute to remove the scroll on document.body when the dialog is open.

Full Changelog: 5.3.6...5.4.0

5.3.6

Full Changelog: 5.3.5...5.3.6

Prefetch

• fix: uses the speculation rules API as a prefetch fallback instead of a link tag when supported, this has a few perf benefits highlighted here: MDN Reference.

Related issue: WICG/nav-speculation#162 (comment)

5.3.5

Full Changelog: 5.3.4...5.3.5

• update dependencies

Prefetch

• fix: remove unnecessary supports checks since speculation rules are a progressive enhancement.

5.3.4

Full Changelog: 5.3.3...5.3.4

Prefetch

• fix: always add link tag for prefetch even when prerendering as a fallback in case speculations rules fails.

5.3.3

Full Changelog: 5.3.2...5.3.3

Prefetch

• fix: use the Speculation Rules API for prefetching as well as prerendering when supported.
• fix: use fetch with low priority instead of link tag for prefetch when Speculation Rules is not supported.

Dialog

• fix: add click-outside-close attribute to Dialog type.

5.3.2

Full Changelog: 5.3.1...5.3.2

• feat: adds the click-outside-close attribute to the dialog element.