@qwik-ui/[email protected]

Patch Changes

• refactor change CardTitle font-weight to medium (by @maiieul in #693)

@qwik-ui/[email protected]

Patch Changes

• 🐞🩹 modal does not close unless the dialog backdrop is clicked (including dangling content) (by @thejackshelton in #702)

  fix: polyfilled popovers render correctly inside of modals.

  fix: nested modals will now close the current modal when the backdrop is clicked.

  fix: nested modals will now close the current modal when the escape key is pressed.

  fix: select does not execute code until interaction (including core).

  tests: larger test suite for modals.

  deprecated: ModalHeader, ModalContent, ModalFooter have been deprecated, as they do not pose significant a11y advantages.

  feat: Two new Modal component pieces. ModalTitle and ModalDescription. These help give our modal an accessible name and supporting description (optional).

  feat: Modal now uses the following CSS as a default inside of an @layer

  @layer qwik-ui {
    /* browsers automatically set an interesting max-width and max-height for dialogs
      https://twitter.com/t3dotgg/status/1774350919133691936
    */
    dialog:modal {
      max-width: unset;
      max-height: unset;
    }
  }

  The default browser styles:

  

  Make it difficult to style a dialog element full-screen, which has led to some confusion recently both in this repo and across the web. The above change strips the responsible browser styles from the dialog eleemnt (which is used by Qwik UI's modal component).

  For more info, feel free to check out the link in the code snippet above.

  Note: In the future, we intend to use the dot notation for the Modal component.

  Note: In the future, we intend to change the modal API to include a trigger. The proposed API is as follows:

  Syntax Proposal

  <Modal.Root>
    <Modal.Trigger>Trigger</Modal.Trigger>
    <Modal.Panel>
      {/*  This is the current <Modal /> */}
      <Modal.Title>Edit Profile</Modal.Title>
      <Modal.Description>You can update your profile here.</Modal.Description>
    </Modal.Panel>
  </Modal.Root>

  Let us know your thoughts on this potential API change in the Qwik UI discord!

• ✨ deprecate modal-showing and modal-closing classes in favor of data-open, data-closing, and data-closed data attributes. (by @thejackshelton in #702)

  These classes will still work at the moment, but will be removed in a near future release.

• refactor: popover listbox class deprecated and set as a default when in floating mode. (by @thejackshelton in #691)

@qwik-ui/[email protected]

Patch Changes

• refactor: strip browser user agent styles relating to max-width (by @thejackshelton in #676)

• 🐞🩹 collapsible renders correctly on CSR (by @thejackshelton in #681)

• ✨ headless label hits draft status! (by @thejackshelton in #688)

@qwik-ui/[email protected]

Patch Changes

• FEAT add styled breadcrumbs component (draft) (by @ditadi in #665)

@qwik-ui/[email protected]

Patch Changes

• ✨ collapsible hits beta! (by @thejackshelton in #669)

• fixed dark mode for combobox and added basic a11y test (by @cwoolum in #662)

@qwik-ui/[email protected]

Patch Changes

• FEAT add experimental styled card image (by @maiieul in #651)

@qwik-ui/[email protected]

Patch Changes

• 🐞🩹 select component now has a flexible hierarchy (by @thejackshelton in #659)

• ✨ carousel hits draft status! (by @thejackshelton in #649)

@qwik-ui/[email protected]

Patch Changes

• 🐞🩹 proper type exports in package.json (by @thejackshelton in #645)

@qwik-ui/[email protected]

Patch Changes

• Select component hits beta! (by @thejackshelton in #637)

  Features

  • Accessible as a button that shows a list, following web a11y standards.
  • Support for single selection.
  • Controlled or uncontrolled.
  • Disabled option support.
  • Stop focus management via the Tab key.
  • Grouped options support.
  • Looping support.
  • Support for custom scroll behavior.
  • Listbox UI is placed above everything else. (SelectPopover)
  • Custom Positioning (SelectPopover)
  • Option selection and focus management by typing (typeahead).
  • Keyboard support for option navigation via arrow keys and focus management.
  • Automatic focus management for first and last options.
  • Supports a custom placeholder.

  Roadmap

  • Opt-in native form support via a visually hidden select.
  • RTL support.
  • Multiple Selection and its respective keyboard interactions.

@qwik-ui/[email protected]

Patch Changes

• REFACTOR minor class fixes on the styled Card and Tabs (by @maiieul in #625)

• FIX added input to registry (by @shairez in cbe6087)