/* ============================================ Wego Component Library — Quick Reference ============================================ Built on foundation.css tokens. Load both files together. Source of truth: components.json + Figma Component Library 4.0 FILES — grouped by role tier (primitives → composites → modules): Primitives (everyday building blocks — drop them anywhere): button.css · badge.css · chip.css · checkbox.css · radio.css · toggle.css input-field.css · input-textarea.css · input-dropdown.css · input-phonenumber.css · search-field.css · segmented-control.css Composites (richer single components with their own internal structure): banner.css · accordion.css · segmented-control-hero.css · card-valueproposition.css · card-news.css · snackbar.css · card-itinerary.css Modules (full page regions / sections): header.css · footer.css · footer-simple.css · popup.css (→button) card-valueproposition-layouts.css (→card-vp) · card-news-layouts.css (→card-news, button) Mobile: mobile-components/header-mobile.css (module →button, header) · mobile-components/accordion-mobile.css (composite) · mobile-components/popup-mobile.css (module →button) BUTTON .btn --primary --secondary --tertiary --optional --destructive base=48px --md(36) --fill(100%) --leading-icon --trailing-icon --icon-only --disabled --processing Inline (text-only, not pill): --inline --external-link --exception .__icon .__label .__spinner BADGE .badge --solid --subtle --subtle-outline --outline --without-outline --neutral --important --highlight --positive --warning --destructive --exceptional --semibold --leading-icon --trailing-icon .__label .__icon CHIP .chip --desktop --mobile base=36px --hover-subtle --active-subtle --active-highlight --disabled --leading-icon --trailing-icon --both-icons --icon-only --with-subtext --semibold .__icon .__label .__text-group .__subtext POPUP .popup Popup Small (desktop) — 512px · --wp-bg-surface, dropshadow-24, radius 24 --image(illustration, centred) --stacked(full-width buttons for long labels) Text-only = left-aligned · image = centred Overlay = --wp-ol-bg-top (flat 48% dark scrim; NOT a blur) .popup-overlay .__content .__media(160px) .__title .__description .__actions(min-width 120px side-by-side) .__close(.btn.btn--md.btn--tertiary.btn--icon-only top-right) Behaviour: .popup-overlay--fixed + data-popup (components.js) Dynamic: WegoPopup.open({title,body,image,stacked,dismissible,actions:[{label,variant,onClick}]}) builds+wires it, returns {el,close()} Mobile (329px) is a separate component — .popup-mobile (see below) CHECKBOX .sel-cb + .sel-cb__icon States: --disabled --selected-disabled --destructive Native: .sel-input (type="checkbox") RADIO .sel-rb + .sel-rb__icon States: --disabled --selected-disabled --destructive Native: .sel-input (type="radio") TOGGLE .sel-toggle + .__thumb States: --on --disabled (+ --on.--disabled) Native: .sel-toggle-input (type="checkbox" role="switch") SEGMENTED CONTROL .sel-seg default=48px (medium) --sm(36) · --semibold=600 (default 400) .__tab .__tab--active .__glider(JS) .__tab-icon SEGMENTED CONTROL HERO .sel-seg-hero (large product selector, pill, 48px icon+label tabs; uses assets/icon-product/ icons) default=frosted-glass --light(--wp-bg-tertiary grey track, white glider, dark labels, colored icons both states) .__tab .__tab--active .__glider(JS) .__tab-icon(--active colored / --inactive white) BANNER .banner --sticky --inline --inline-border --neutral --positive --important --warning --destructive --exceptional --compact(6px 8px) --center default=12px 16px, left .__container .__icon .__content .__text .__title .__body [inline in body: .__strong(emphasis, takes severity colour) .__link(underlined "Details")] .__actions .__close SNACKBAR / TOAST .snackbar transient feedback on a dark surface · radius 8 · 10/16 padding · dropshadow-8 · text 14/22 Type: Snackbar (may carry __action + __close) · Toast (text only — no action/close, auto-dismiss) Status: default Neutral (--wp-bg-inverse) · --destructive (--wp-bg-solid-destructive, white text) Layout: default single-line (centred, max 768px) · --multiline (stacked, 704px, wrap text+action in .__body) .__icon(20px leading) .__text(14/22) .__action(green/white underline 14px) .__close(X 16px) Live: WegoSnackbar.open({text,status,type,action,duration}) → auto-dismiss, pause on hover/blur, slide-in/fade-out A11y: role="status" + aria-live polite(neutral)/assertive(destructive) CARD ITINERARY .card-itinerary flight summary — white panel on grey shell + pax footer Legs: one-way = 1 unlabelled leg · round-trip = 2 labelled legs · multi-city = 3+ on --scroll --vertical(max 368px narrow summary: legs stack as a column, --divider = dotted TOP rule, logo slot 24px; + optional .__policy(.__policy-icon Information 16px + .__policy-label underlined "Baggage & Cancellation Policy", bottom of panel)) .__banner(optional, top of white panel — vertical list of 1+ Banners, 8px gap: schedule change=--warning, umrah/check-in=--neutral) .__badges(optional, below __banner / above __legs — Badge row: Refundable=.badge--solid.badge--positive · Non Refundable=.badge--solid.badge--warning; contradictory, never both) .__legs [--scroll] .__leg [--divider (left rule on 2nd+)] .__leg-label(Departure/Return/Flight N [+ .__leg-change=orange schedule note e.g. "(Departs 2h later)"]) Logo slot (32×40) .__logos: 1 airline = .__logo(32×24) · 2 = --stack + 2×.__logo--sm(20px, no gap) · 3 = --stack + .__logo--sm + .__logo-more(+N) · 4+ = .__logo--multi (green fallback mark) .__leg-body .__leg-text .__route .__leg-point .__code .__time .__plane(Airplane ic-secondary) .__nextday(+1) schedule change: .__time--changed(new, orange) + .__time-old(old, struck grey) — per endpoint .__meta [date change: .__date--changed(new, orange) + .__date-old(old, struck grey)] .__stops(--wp-txt-warning; non-direct: "1 Stop in DOH" / "2 Stops in DOH, LHR" / "3 Stops …") .__footer .__pax-group .__pax .__pax-icon(Adult=Male/Child=Child/Infant=InfantOutline) + .btn.btn--md.btn--inline(View Details, medium inline) .__scroll--prev/--next(multi-city edge arrows: .btn.btn--md.btn--icon-only.btn--tertiary + dropshadow-8; shown per scroll direction via components.js) ACCORDION .accordion default=border,multi-item --shadow(drop-shadow,single-item) --compact(16px vertical padding, dense lists) --flush(borderless, embed inside a parent card: square toggles, full-bleed panel, top rule when open) --heading-lg(h4-scale 20/24 semibold heading text) .__chevron is 20px (medium) in all variants, desktop + mobile --compact title: .title-medium--semibold or .paragraph-medium (regular) — one weight per accordion .is-open on .__item (shows panel, rotates chevron) .__item .__toggle .__heading .__chevron .__panel .__copy .__more .__more-btn .__more-icon .__heading--label .__heading-main .__badge-group SEARCH FIELD .search-field pill, 48px, dropshadow-24 .is-active .is-keyboard-focus .__icon input .__clear INPUT FIELD .input-field text field base=48px --sm(36) --error --disabled --required .is-keyboard-focus Hover=subtle grey border · Focus/Active=green (--wp-line-selected) .__label .__field .__control .__helper .__icon --calendar (date field, DD/MM/YYYY): optional .__leading-icon (calendar) + .__check (green tick on valid value) components.js auto-masks typing → DD/MM/YYYY + validates on blur (impossible dates flip to --error, inject warning icon + helper). Load components.js; add data-date-mask to opt a field in; data-date-error="…" overrides the message. INPUT TEXTAREA .input-textarea multi-line input (box grows; native vertical resize) default min-height 80px (text 16/20) · --sm min-height 72px (text 14/18) --error --disabled --required · Hover=subtle grey · Focus/Active=green (--wp-line-selected) · .is-keyboard-focus .__label .__field .__control .__helper-row .__helper .__counter .__icon Optional counter (.__counter, right of helper): pair with maxlength; components.js auto-updates "used/max" on input INPUT DROPDOWN .input-dropdown single-select field (same shell/sizing/states as Input Field; trailing caret) field min-height 48px --sm(36) --error --disabled --required --auto-filled(subtle bg) --searchable .is-keyboard-focus Hover=subtle grey border · OPEN(.is-open)=green (--wp-line-selected) + caret up; picking a value returns to neutral FILLED (not active) .is-open on .input-dropdown → caret up + shows .__menu Structure: .__label + .__control(wraps __field + __menu; menu anchors to field, floats over helper) + .__helper .__field .__value(.__value--placeholder) .__caret .__icon(warning, closed-only) --searchable: add .__search in the field → type-to-filter (live), .__empty "No matches" row, query clears on close Two types: default = Selection (tap to pick, short list) · --searchable = type-to-filter (long list) Menu (list-dropdown-v1, Figma 1814:820): .__menu (absolute, --wp-line-divider border + dropshadow-8; min-width = field, grows wider, max 480px; max 5 rows then scrolls) .__option = 48px/36px-min row (hover/.is-active --wp-bg-tertiary · --selected shows far-right green check · --disabled muted) Rich row: .__option-icon(24) .__option-body(.__option-label + .__option-subtitle) .__option-right(.__option-check then .__option-badge, far right) Native escape hatch: put a .__select () + .__check(green tick, valid, hidden while editing) / .__icon(warning, error, closed-only) Loads components.js (the code dropdown is a live WegoInputDropdown) CARD VALUE PROPOSITION .card-vp-grid + .card-vp 4-col action card grid Layouts: .card-vp-grid (4-col) · .card-vp-grid--3 (3-card list, exactly 3 cards) --red --green --orange --blue (icon color) --horizontal (icon+title inline header) --left (stacked, left-aligned) .__icon [--brand: 40px fixed-color logo, no tile] .__header .__body .__title .__text .__status (Badge pinned to top-left border) .__actions (multi-button bottom row) CARD NEWS .card-news image + tag + title + excerpt, hover reveals medium primary CTA --bordered(no shadow + line-inactive border) .__img .__body .__tag .__title .__excerpt .__cta (+ .btn .btn--primary .btn--md) Layouts: .card-news-grid (4-col) · .card-news-grid--3 (3-col) · .card-news-carousel-shell + .card-news-carousel (h-scroll, optional arrows) · --full(no arrows) FOOTER .footer full-width dark footer (--wp-bg-inverse-still, stays dark both themes); 4 link cols + copyright row Inner caps at 1136px, flush with header · all 4 cols present at every size: ≥1024 4-up · 768–1023 2×2 grid · ≤767 single column (wider gap on mobile) Social icons from assets/social/ (FB/X/IG/LinkedIn/TikTok, currentColor → --wp-ic-inverse-still) .__inner .__links .__col .__col-title .__link .__copyright .__divider .__copyright-row .__legal .__social .__social-icon .__disclaimer (optional fine print) FOOTER SIMPLE .footer-simple full-width centered bar; wraps ≤393px .__text HEADER (BOW) .header 72px full-width top bar (BOW desktop) Inner container: width: var(--grid-container) → fixed 1136 · 944 · 704, then fluid (100% - 32px) below 736px; centered via margin:auto Account states: Login V1 uses .header__account-btn on a trailing-icon optional button Modifiers: --sticky (pin to top) · --scrolled (adds dropshadow-8) .__inner .__logo .__right .__account-btn HEADER (META) .header-meta 72px full-width top bar with nav tabs (META desktop) Left: logo + tab nav (.__tabs .__tab .__tab--active .__tab--more .__tab-caret) Right: locale cluster (.__locale .__locale-flag .__locale-sep .__locale-label) + .__util-link + btn Inner container: default=1136 · --15col (1520px) Modifiers: --sticky · --scrolled · --transparent (white text, no bg; reverts to solid on --scrolled) Transparent variant: replace tabs with .__wegopro badge (.__wegopro-icon .__wegopro-text .__wegopro-name .__wegopro-sub) Figma: component set 53:5007 HEADER (GROWTH) .header-growth 72px transparent-first header for growth/landing pages Left: logo + Flights / Hotels / Promo Code tabs only (.__tabs .__tab .__tab--active) Right: locale cluster + Support link (.__locale · .__util-link at desktop, .__icon-btn at ≤768px) Transparent by default; reverts to solid white on --scrolled At ≤768px: tabs stay visible, Support becomes icon button (.__icon-btn); locale stays full Modifiers: --sticky · --scrolled ACCORDION (MOBILE) .accordion-mobile same as .accordion but 16px padding throughout --shadow(drop-shadow,single-item) .is-open on .__item .__item .__toggle .__heading .__chevron .__panel .__copy .__more .__more-btn .__more-icon .__heading--label .__heading-main .__badge-group .__empty HEADER (MOBILE) .header-mobile 56px mobile header (393px) Left: .__hamburger (icon button) + .__logo Right: .btn.btn--md.btn--primary ("Use App") Variants: default=solid white · --transparent (over hero, white text) · --scrolled (solid white + shadow) --transparent + --scrolled reverts everything to solid Modifiers: --sticky · --transparent · --scrolled POPUP (MOBILE) .popup-mobile Popup Small (Mobile/App) — 329px · radius 16 · 20px padding · medium buttons Self-contained: own .popup-mobile-overlay (+ --fixed) · content always centred --image(120px illustration) --stacked(full-width buttons, primary on top) .popup-mobile-overlay .__content .__media(120px) .__title .__description(14/22) .__actions .__close(tight top-right) Behaviour: .popup-mobile-overlay--fixed + data-popup (components.js) Dynamic: WegoPopupMobile.open({title,body,image,stacked,dismissible,actions:[{label,variant,onClick}]}) → {el,close()} */ /* --- Primitives --- everyday building blocks; drop them anywhere */ @import url("components/button.css"); @import url("components/badge.css"); @import url("components/chip.css"); @import url("components/checkbox.css"); @import url("components/radio.css"); @import url("components/toggle.css"); @import url("components/input-field.css"); @import url("components/input-textarea.css"); @import url("components/input-dropdown.css"); @import url("components/input-phonenumber.css"); /* → input-dropdown (searchable code selector) */ @import url("components/search-field.css"); @import url("components/segmented-control.css"); /* --- Composites --- richer single components with their own internal structure */ @import url("components/banner.css"); @import url("components/accordion.css"); @import url("components/segmented-control-hero.css"); @import url("components/card-valueproposition.css"); /* single card; CTA → button */ @import url("components/card-news.css"); /* single card; CTA → button */ @import url("components/snackbar.css"); @import url("components/card-itinerary.css"); /* → button (View Details md inline), banner (optional __banner slot), badge (optional __badges row) */ /* --- Modules --- full page regions / sections */ @import url("components/header.css"); @import url("components/footer.css"); @import url("components/footer-simple.css"); @import url("components/popup.css"); /* → button */ @import url("components/card-valueproposition-layouts.css"); /* → card-vp */ @import url("components/card-news-layouts.css"); /* → card-news, button (carousel nav) */ /* --- Mobile components --- */ @import url("mobile-components/header-mobile.css"); /* module → button, header */ @import url("mobile-components/accordion-mobile.css"); /* composite */ @import url("mobile-components/popup-mobile.css"); /* module → button */