Changelog

• Added even more improved styling for <select> elements, using new customizable select features.

  • Added the .checks and .checkboxes classes to customize the use of selection indicators. By default, single-item selects will use no indicator, and multi-selects will use checks.

  • Added support for collapsible multi-selects, which can be opened or closed like single-selects, using <select multiple size=1> (some browsers only).

  • See Forms: Selects for more information.

• Added the --chevron-down-icon, --check-icon, --square-icon and --square-check-icon variables to supply alternate icons (in SVG data: URI format). These default to icons pulled from the Lucide icon set.

• --muted-accent is now specified by colorways.

• Added sidenotes, bits of text positioned in the gutters next to text blocks to provide extra information. These are created with <small role=note>, or <aside role=note> if they contain block elements.

• Added --sidebar-width variable to customize the width of the sidebar in .sidebar-layout.

• Input elements will now be full width by default in some scenarios, like when inside pseudo-tables.

  • Added .wide-inputs and .narrow-inputs classes to override this behavior in any part of a document.

• Added --input-inline-size variable to customize the default max inline size of inputs.

• Added the .flip class for inverting the ordering of various components. Currently, this includes sidenotes (to change side) and <select> elements (to change the position of checkmarks),

• Improved support for vertical writing systems:

  • The .fullbleed and .fullscreen classes will now stretch to either the width or the height, based on the writing direction.

  • Fixed .sidebar-layout on vertical writing modes.

  • New logical utility classes have been added to supplement existing utilities:

    Existing	Logical
    .top	.inset-block-start
    .bottom	.inset-block-end
    .left	.inset-inline-start
    .right	.inset-inline-end
    	.inset-block
    	.inset-inline
    .float:left	.float:inline-start
    .float:right	.float:inline-end

  • The Missing codebase now uses logical properties (i.e. block, inline) pervasively.

  • Due to current CSS limitations, we can't always adapt content automatically based on writing mode. Due to this, we've added the .vertical class which tells Missing explicitly that an element contains vertical text.

    • Toggle switches, <meter> and <progress> elements can be adapted via the .vertical class.

• Fixed lack of focus indication for toggle switches.

• Fixed an issue where <select multiple> elements were only one item tall.

• Internal changes:

  • We have adopted Stylelint project-wide.

  • We've moved our website hosting from Netlify to Statichost.