/* ===================================================================== Kiteworks — Language Picker component --------------------------------------------------------------------- Searchable, RTL-aware UI-locale switcher. Mounted once in the public top nav (dark) and once in the admin topbar (light); it themes itself from the token flip in tokens.css. Adapted from the i18n handoff to this repo's ACTUAL token vocabulary (the handoff was written against an abstract --fg-1/--stroke/.theme-* layer; here the brand tokens kept their legacy --kw-* names): --kw-font-headline --kw-font-body --kw-font-mono --kw-fg --kw-fg-muted --kw-fg-subtle --kw-border-color --kw-bg-subtle --kw-blue --kw-muted-lavender --kw-soft-lavender --kw-signal-gold --kw-yellow-ink --kw-teal --kw-radius-sm --kw-radius-md --kw-radius-xl --kw-radius-pill RTL (handoff §5): the panel position uses LOGICAL properties (inset-inline-*) so it mirrors automatically under , and item text uses text-align:start. No physical left/right here. ===================================================================== */ .langpicker { position: relative; flex-shrink: 0; } .langpicker__trigger { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--kw-font-headline); font-weight: 500; font-size: 13px; padding: 7px 12px; border-radius: var(--kw-radius-pill); transition: 150ms; background: transparent; border: 1px solid transparent; color: inherit; } .langpicker__trigger [data-lucide] { width: 16px; height: 16px; } .langpicker__trigger .chev { width: 14px; height: 14px; opacity: .6; transition: transform 180ms; } .langpicker[data-open="true"] .langpicker__trigger .chev { transform: rotate(180deg); } /* dark (public top nav) */ html.dark .langpicker__trigger { color: #fff; background: rgba(147,156,229,0.10); border-color: rgba(77,96,251,0.18); } html.dark .langpicker__trigger:hover, html.dark .langpicker[data-open="true"] .langpicker__trigger { border-color: rgba(77,96,251,0.5); background: rgba(77,96,251,0.14); } /* light (admin topbar) */ html.light .langpicker__trigger { color: var(--kw-fg-muted); background: var(--kw-bg-subtle); border-color: var(--kw-border-color); } html.light .langpicker__trigger:hover, html.light .langpicker[data-open="true"] .langpicker__trigger { border-color: var(--kw-blue); color: var(--kw-fg); } .langpicker__trigger .code { font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; opacity: .75; } .langpicker__panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 200; width: 340px; max-width: calc(100vw - 24px); display: none; flex-direction: column; opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease, transform 160ms ease; border-radius: var(--kw-radius-xl); overflow: hidden; } /* Visibility is gated on the [data-open] attribute setting opacity:1 directly (handoff §7) — NOT on a CSS keyframe. The transition below is the slide-in only, so the panel can never be left invisible where animations are throttled. */ .langpicker[data-open="true"] .langpicker__panel { display: flex; opacity: 1; transform: none; } html.dark .langpicker__panel { background: rgba(13,15,49,0.97); border: 1px solid rgba(77,96,251,0.30); box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 0 55px rgba(197,185,246,0.10); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } html.light .langpicker__panel { background: #fff; border: 1px solid var(--kw-border-color); box-shadow: 0 30px 80px rgba(11,14,36,0.22); } /* Modifier: open left-aligned (for a left-positioned trigger). Logical so it still flips correctly under RTL. */ .langpicker--left .langpicker__panel { inset-inline: 0 auto; } .langpicker__searchbar { display: flex; align-items: center; gap: 9px; padding: 13px 15px; border-bottom: 1px solid var(--kw-border-color); } .langpicker__searchbar [data-lucide] { width: 16px; height: 16px; color: var(--kw-fg-subtle); flex-shrink: 0; } .langpicker__searchbar input { flex: 1; border: 0; background: transparent; outline: none; color: var(--kw-fg); font-family: var(--kw-font-body); font-size: 14px; } .langpicker__searchbar input::placeholder { color: var(--kw-fg-subtle); } .langpicker__searchbar kbd { font-family: var(--kw-font-mono); font-size: 10px; color: var(--kw-fg-subtle); border: 1px solid var(--kw-border-color); border-radius: 5px; padding: 1px 5px; } /* Deliberate accent (handoff §6): solid brand-blue thumb, electric-indigo on hover — a small-popover exception to the app-wide translucent default. Only the tokens differ; the scrollbar itself is painted once in base.css. */ .langpicker__list { max-height: 336px; overflow-y: auto; padding: 6px; --kw-scrollbar-thumb: var(--kw-blue); --kw-scrollbar-thumb-hover: var(--kw-electric-indigo); } .langpicker__grouplabel { font-family: var(--kw-font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--kw-fg-subtle); padding: 10px 12px 6px; } .langpicker__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start; cursor: pointer; padding: 9px 11px; border-radius: var(--kw-radius-md); border: 1px solid transparent; background: transparent; color: var(--kw-fg); font-family: var(--kw-font-body); } .langpicker__item:hover, .langpicker__item.is-active { background: var(--kw-bg-subtle); } html.dark .langpicker__item:hover, html.dark .langpicker__item.is-active { background: rgba(77,96,251,0.16); } .langpicker__item.is-current { background: transparent; } .langpicker__code { flex-shrink: 0; width: 38px; height: 30px; display: grid; place-items: center; border-radius: var(--kw-radius-sm); font-family: var(--kw-font-mono); font-size: 11px; font-weight: 600; background: rgba(77,96,251,0.12); color: var(--kw-muted-lavender); border: 1px solid rgba(77,96,251,0.20); } html.light .langpicker__code { background: var(--kw-bg-subtle); color: var(--kw-blue); border-color: var(--kw-border-color); } .langpicker__names { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } /* unicode-bidi:isolate lets an RTL endonym (עברית, العربية) shape correctly right-to-left WITHOUT re-aligning the element — no dir="rtl" on this span, so it stays start-aligned next to the chip like every other row. The whole-panel RTL flip (when the UI locale itself is RTL) is handled separately below. */ .langpicker__native { font-size: 14px; font-weight: 500; color: var(--kw-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate; } .langpicker__en { font-size: 11.5px; color: var(--kw-fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .langpicker__rtl { flex-shrink: 0; font-family: var(--kw-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--kw-radius-pill); background: rgba(253,202,19,0.16); color: var(--kw-signal-gold); border: 1px solid rgba(253,202,19,0.3); } html.light .langpicker__rtl { background: #FEF6DC; color: var(--kw-yellow-ink); border-color: #F6E0A0; } .langpicker__check { flex-shrink: 0; color: var(--kw-teal); display: none; } .langpicker__check [data-lucide] { width: 17px; height: 17px; } .langpicker__item.is-current .langpicker__check { display: block; } .langpicker__item.is-current .langpicker__code { background: #2BB673; color: #06170E; border-color: #2BB673; } html.light .langpicker__item.is-current .langpicker__code { background: #1B8E5A; color: #fff; border-color: #1B8E5A; } .langpicker__empty { padding: 28px 16px; text-align: center; color: var(--kw-fg-subtle); font-size: 13px; } .langpicker__empty [data-lucide] { width: 26px; height: 26px; color: var(--kw-fg-subtle); display: block; margin: 0 auto 8px; } .langpicker__foot { padding: 10px 14px; border-top: 1px solid var(--kw-border-color); font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); display: flex; align-items: center; gap: 7px; } .langpicker__foot [data-lucide] { width: 13px; height: 13px; } /* tiny toast shown when language / direction changes (standalone/mockup mode; in the app the server re-render is the feedback). */ .lang-toast { position: fixed; bottom: 76px; inset-inline-start: 50%; transform: translateX(-50%) translateY(8px); z-index: 1000; display: flex; align-items: center; gap: 9px; opacity: 0; pointer-events: none; padding: 11px 16px; border-radius: var(--kw-radius-pill); font-size: 13.5px; color: #fff; background: rgba(13,15,49,0.96); border: 1px solid rgba(77,96,251,0.45); box-shadow: 0 16px 50px rgba(0,0,0,0.5); transition: 220ms ease; } .lang-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .lang-toast [data-lucide] { width: 16px; height: 16px; color: var(--kw-soft-lavender); } .lang-toast .code { font-family: var(--kw-font-mono); color: var(--kw-signal-gold); }