Laioutr UI 2.4.0

CHANGELOG.md

Release notes

UI 2.4.0

Minor Changes

• Un-mirror alignment under "Greedy First" sizing

  GridFill now accepts justify and align props ('start' | 'center' | 'end') for main- and cross-axis item alignment. Alignment is honored consistently across every sizing mode, including greedy-first.

  This fixes Container: with sizing: 'greedy-first', alignment was mirrored — choosing "top" packed content to the bottom — forcing editors to pick the opposite option. Alignment now matches the chosen option.

  (DEV-335, SUPPORT-17)

• Rename the sectionGlossaryList locale namespace to sectionGlossaryListing to match the renamed Glossary Listing section.

• Add playback="background" mode to <Media> — a single switch for the muted-autoplay-loop cluster (controls off; autoplay/muted/loop/playsinline/disablePictureInPicture on), with individual props still overriding. <Media> now exposes v-model:paused so consumers render and position their own WCAG 2.2.2 pause control; reduced-motion suppresses autoplay and seeds the paused state. MediaStage adopts the mode for video backgrounds; it ships no pause control of its own, so a consumer that needs one binds v-model:paused and places it.

• Add textColor prop to NavigationMenuTextItem

  NavigationMenuTextItem now accepts an optional textColor (a resolved CSS color string). When set, it overrides the surface-tone color for the item label; when omitted, the item keeps inheriting the surrounding surface tone. Named textColor (not a bare color) so a future backgroundColor can sit alongside it for the same item.

• Add a plain variant to Input (alongside outline and subtle; default stays outline) that paints a resting background and border from the --input-field-plain-* tokens, with hover, focus, disabled, and error states.

  EmailInputForm and EmailInputFormDisplay now accept an optional variant prop forwarded to the underlying Input. Defaults are unchanged, so existing usages render as before.

• Rename BlogPostDetail to ArticleDetail and promote it to the shared reading-view component for editorial detail sections (Blog Post + Glossary). Add a showSocialShare prop (default false) so non-blog consumers can opt out of the social-share footer.

• Support per-item text color in MenuBasic and MegaMenu

  MenuBasicItem and MegaMenuItem gain an optional textColor (ColorFieldValue). MenuBasic and MegaMenuTrigger resolve it via colorValueToCss and apply it to the item label, falling back to the surface-tone cascade when unset. NavigationNode (used by MenuSideBySide) carries the same textColor field. Named textColor to leave room for a future backgroundColor on the same items.

• Add a coupon box block for the Product Details Container

  A new non-standalone BlockProductDetailCouponBox wraps the CouponBox component so editors can place a promotional coupon / discount-code box in the content slot of SectionProductDetail. Exposes text, coupon code, discount text, icon and the default / promotion-code style variant; the copy action lets shoppers copy the code to the clipboard. Registered in the Product Details Container's content slot and ships a Studio preview image.

• Add SectionGlossaryDetail, which renders a single glossary entry (term + definition) via the shared ArticleDetail component, and rename SectionGlossaryList to SectionGlossaryListing to match platform naming. SectionBlogPostDetail now renders via the shared ArticleDetail component.

  Note: the Studio component string changed (SectionGlossaryList → SectionGlossaryListing). No data migration is shipped because the section was only just introduced and is not referenced by any stored configuration yet.

• Add per-item text color picker to header menu blocks

  BlockMenuBasic, BlockMenuSideBySide, and BlockMegaMenu now expose a theme color picker on each top-level menu item's title, via the as: 'style' decorator (the small style icon over the title field). The picked color is applied as the item's label text color. The decorator object (linkTitleStyle / labelStyle / titleStyle) holds a textColor field, leaving room to add backgroundColor for the same items later. Entity-driven items (CMS MenuItem queries) are unaffected — the picker only attaches to author-typed titles.

Patch Changes

• Add a contentPadding prop to the CTA banners (BannerBasic, BannerIntegrated, BannerShowcase) via the shared CtaBannerInheritableProps base, plus reduced-padding modifier classes (--content-padding-m / --content-padding-s / --content-padding-none) on each banner's inner content element. A modifier is only emitted for the opt-in m / s / none values; unset or 'default' keeps the existing padding ramp, so existing banners are unchanged.

  Partial fix; full edge placement is tracked in a follow-up story.

  (DEV-334, SUPPORT-16)

• Top-align AlphabeticalIndex groups

  Groups are grid items that stretch to the row height, but their content used justify-content: center, so short columns (e.g. a single-entry "1" group) rendered vertically centered instead of aligned with the taller columns. Switched to justify-content: flex-start so every group's header and links start at the top.

• Make LocationFinder "Boxed" container style actually clamp width

  The .location-finder--boxed rule previously only added a border and rounded corners but never constrained width, so the "Boxed" option was visually indistinguishable from "Full width". It now sets max-width: var(--container-max-width); margin-inline: auto — mirroring Backdrop's .backdrop--boxed — so boxed instances clamp and center at desktop (--container-max-width is 100% below --lg and narrows from --lg up, matching the existing --lg-gated boxed styling).

  Note: existing instances already set to "Boxed" will now visibly clamp and center their width on desktop. This is the intended fix, not a regression. (DEV-331, SUPPORT-15)

• Fix LocationFinderMap failing to render in dev

  import { GoogleMap } from 'vue3-google-map' resolved to nothing in dev — Vite served the dependency's UMD bundle, which exposes no named ESM exports — so LocationFinderMap broke. @laioutr-core/ui now pre-bundles vue3-google-map via Vite optimizeDeps, so the map renders with no consumer config.

• BlockButton Hug/Fill width now takes effect inside Media & Text. The slot column's default align-items: stretch was forcing every button to full width; the column now uses align-items: flex-start, so a width-less (Hug) button sizes to its content while Card-based blocks keep their own width: 100% (and their internal text alignment) unchanged. (DEV-326)

• MediaText gains an innerBlockPadding prop forwarded to Backdrop's inner-block-padding, so the section can expose a Padding control consistent with other sections. (DEV-325)

• Fix the NewsletterRegistration media slot collapsing to near-zero width when a media block is slotted in — the media now fills its column.

  The email field also renders with the plain Input look (visible resting background). PopUpNewsletter is unaffected.

• Add a Content Padding field (Design → Layout) to the three banner sections (SectionBannerBasic, SectionBannerIntegrated, SectionBannerShowcase), forwarded to the underlying banner's contentPadding prop. Options are Default / M / S / None, with Default first so existing banners keep their current padding.

  Partial fix; full edge placement is tracked in a follow-up story.

  (DEV-334, SUPPORT-16)

• SectionLocationFinder's container-style control now uses the shared containerStyleField (a toggle_button). The sidebar label becomes "Style".

  Data-safe: the stored value ('full-width' | 'boxed') and the default ('full-width') are unchanged, so no Studio data migration is required. (DEV-331)

• Add a Padding control (none/S/M/L) to the Media & Text section under Design → Layout, directly after Margin. It forwards to MediaText's inner padding. Backward-compatible: unset configurations fall back to none (no inner padding), identical to today. (DEV-325)