New

The login layer on the demo app now covers the three screens that surround it, so an account flow is styled end to end rather than only its front door. All three are built from the same Layout_Login block:

• Reset password — Layout_Login with fewer rows. It needs no new classes; it was already possible in 0.2.0 and is called out here because it is part of the same flow.
• Sign up — the email step, which is where the new error states earn their keep.
• Verify email — the step that needed genuinely new styling.

What the verify step added:

• A password requirements checklist. password-analysis-title and password-analysis-requirements, with password-analysis-requirements-item for each line — a marker and a label, on a 4px rhythm. Put it inside a field marked verify-password-field and it unrolls on :focus-within, a 0.4s max-height transition, so the rules appear while the field is being filled and fold away afterwards.
• The consent row. verify-consent-row sets the checkbox-and-label rhythm — 12px type, an 8px gap, and the label free to wrap without dragging the checkbox out of line.
• The password field variant used on that step, with the reveal icon anchored to the top of the field so a validation message appearing beneath cannot push it out of position.

As with the password reveal in 0.2.0, the library ships the styling. Which requirements are met, and when, is your logic.

Form error states

Login inputs now have an invalid state: not-valid on a field gives it the error border, and keeps it through hover and focus rather than losing it to the interaction state. Pair it with the validation message and a submit that marks the offending fields.

The searchable dropdown

Most of this release. The dropdown now behaves the way the rest of the system does, rather than looking right and acting differently.

• Keyboard. It opens when it receives focus and puts the caret in the search box, so arrow keys, type-ahead and Enter are the ones you already know. Tab moves on to the next real field instead of walking the option list, and Escape closes it.
• Focus ring on the trigger, matching every other focusable control — and no doubled ring once the panel is open.
• An 8px gap between the trigger and the option panel.
• A two-line empty state. "No results found", with a hint line beneath it, instead of a bare one-liner.
• The search icon follows --icon-primary, so it is legible in light as well as dark.

Unlike the password reveal, this one ships the behaviour as well as the styling: all 13 OutSystemsUI/Dropdowns client actions work against DropdownField, so DropdownSetValue, DropdownClear, DropdownGetSelectedValues and the rest do what they do on the stock widget.

The three blocks are DropdownField (the searchable field), DropdownEmpty (a floating menu container for icon-button row actions) and DropdownItem.

Dialog styling

A modal dialog, 48 rules that were previously missing: the overlay and its dimmed backdrop, the card, a header with title, subtitle and close, a footer, the scrollable variant, the tabbed variant, and the "unsaved changes" confirmation layer. Build a dialog with these class names and it picks up the design system instead of rendering unstyled.

As with the password reveal, the library ships the styling. Opening, closing and what the buttons do are yours.

Fixes

• The checkbox no longer changes size between breakpoints. It was 20px on desktop and 32px on tablet and phone, because OutSystems UI enlarges checkboxes for touch at a specificity the token-level rule could not reach. Now 20px throughout, tick still centred.
• The dropdown's search icon was washed out in light mode — it was drawn as an image with a colour baked in and ignored the icon token.

One behaviour change

DropdownSetValue and DropdownClear default to not raising the dropdown's change event, which left the control showing a stale selection after a programmatic change. Both now raise it. If you were relying on the silent behaviour — setting an initial value without triggering your own OnChange logic, say — guard that logic rather than the call.

What's new in 0.2.0

A sign-in layout

Layout_Login: the whole login composition in one block, a centred form column with theme-aware corner artwork, spaced and typed for you in light and dark. No input parameters; four placeholders:

• Logo: your brand mark, or leave it empty and the theme paints a wordmark for the active theme. Fill it and the theme's mark switches itself off, so the two never overlap.
• Title: heading or account line.
• Content: your fields, submit button and inline actions.
• Footer: the sign-up or secondary link line.

The form is yours, so the block imposes nothing on your authentication.

Login colours as tokens

Each colour has a light value and a dark override, so one set of rules serves both themes and overriding a token restyles the login with everything else. Five login-specific ones you can set in your theme: --login-text-primary, --login-text-secondary, --login-label, --login-input-border, --login-link-hover.

Password reveal styling

Add a container with pds-login-password-eye inside a field column marked pds-login-password-field and the icon is positioned, sized and themed. The toggle behaviour is yours to wire. The library ships the styling, not the logic. The demo screen shows one way, keyboard handling included.

Fixes

• Collapsed page-header title is vertically centred; the sticky bar sizes correctly with the nav rail expanded or collapsed, and at tablet and phone widths; action buttons align right.

• Login inputs follow the design system's control metrics (40px, 8px padding); labels regain their 4px gap.
• Links use the link token in dark instead of a light-theme colour.