create-tanqory-theme 0.0.0-stage → 0.2.3

package/templates/nova/src/components/overlays/CookieConsent.tsx

@@ -0,0 +1,170 @@
+import { useId, useState } from 'react'
+import type { ConsentBannerConfig } from '@tanqory/theme-kit'
+import { Button } from '../base/Button'
+import { Switch } from '../base/Switch'
+import { useNova } from '../../styles/NovaProvider'
+import { Modal } from './Modal'
+import './CookieConsent.css'
+
+export interface ConsentChoice {
+  analytics: boolean
+  marketing: boolean
+  /** Remembers region and recent searches — platform-dependent (DATA REQUIREMENT). */
+  preferences: boolean
+}
+
+export interface CookiePreferencesProps {
+  open: boolean
+  onClose: () => void
+  onSave: (choice: ConsentChoice) => void
+  initial?: Partial<ConsentChoice>
+  /** The Preferences category exists only when the platform supports it. */
+  preferencesAvailable?: boolean
+  /** The merchant's own words for the dialog (Settings › Customer privacy); each falls back to Nova's. */
+  copy?: ConsentBannerConfig['preferences']
+}
+
+/**
+ * Nova 13 · 10 cookie preferences — dialog M. Strictly necessary is always
+ * on (shown, not changeable); every other category starts off — no
+ * pre-ticked boxes. Reject non-essential and Save choices, one style each.
+ */
+export function CookiePreferences({ open, onClose, onSave, initial, preferencesAvailable = false, copy = {} }: CookiePreferencesProps): JSX.Element {
+  const { strings } = useNova()
+  const [choice, setChoice] = useState<ConsentChoice>({ analytics: false, marketing: false, preferences: false, ...initial })
+  const preferencesHint = copy.personalizationDescription ?? strings.preferencesHint
+  const rows: { key: keyof ConsentChoice | 'necessary'; label: string; hint: string }[] = [
+    { key: 'necessary', label: copy.requiredTitle ?? strings.strictlyNecessary, hint: copy.requiredDescription ?? strings.strictlyNecessaryHint },
+    { key: 'analytics', label: copy.analyticsTitle ?? strings.analytics, hint: copy.analyticsDescription ?? strings.analyticsHint },
+    { key: 'marketing', label: copy.marketingTitle ?? strings.marketing, hint: copy.marketingDescription ?? strings.marketingHint },
+    { key: 'preferences', label: copy.personalizationTitle ?? strings.preferencesCookies, hint: preferencesAvailable ? preferencesHint : `${preferencesHint} ${strings.notAvailableYet}.` },
+  ]
+  const bullets = copy.bullets ?? []
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title={copy.title ?? strings.cookiePreferences}
+      size="md"
+      footer={
+        <>
+          <Button variant="secondary" onClick={() => onSave({ analytics: false, marketing: false, preferences: false })}>
+            {copy.declineAllLabel ?? strings.rejectNonEssential}
+          </Button>
+          <Button onClick={() => onSave(choice)}>{copy.saveLabel ?? strings.saveChoices}</Button>
+        </>
+      }
+    >
+      {(copy.introTitle || copy.introBody || bullets.length > 0) && (
+        <div className="nv-consent-prefs__intro">
+          {copy.introTitle && <p className="nv-consent-prefs__label">{copy.introTitle}</p>}
+          {copy.introBody && <p className="nv-consent-prefs__hint">{copy.introBody}</p>}
+          {bullets.length > 0 && (
+            <>
+              {copy.bulletTitle && <p className="nv-consent-prefs__label">{copy.bulletTitle}</p>}
+              <ul className="nv-consent-prefs__bullets">
+                {bullets.map((b, i) => (
+                  <li key={i}>{b}</li>
+                ))}
+              </ul>
+            </>
+          )}
+        </div>
+      )}
+      <ul className="nv-consent-prefs">
+        {rows.map((r) => {
+          const locked = r.key === 'necessary'
+          const off = r.key === 'preferences' && !preferencesAvailable
+          return (
+            <li key={r.key} data-disabled={off ? '' : undefined}>
+              <Switch
+                label={
+                  <span className="nv-consent-prefs__text">
+                    <span className="nv-consent-prefs__label">{r.label}</span>
+                    <span className="nv-consent-prefs__hint">{r.hint}</span>
+                  </span>
+                }
+                checked={locked ? true : choice[r.key as keyof ConsentChoice]}
+                disabled={locked || off}
+                onChange={(e) => !locked && setChoice((c) => ({ ...c, [r.key]: e.target.checked }))}
+              />
+            </li>
+          )
+        })}
+      </ul>
+    </Modal>
+  )
+}
+
+export interface CookieConsentProps {
+  /** Shown until the shopper answers. */
+  open: boolean
+  /** The privacy policy page; no link while the store has not published one. */
+  privacyUrl?: string | null
+  onDecide: (choice: ConsentChoice) => void
+  preferencesAvailable?: boolean
+  /** Open the preferences dialog on first render (stories). */
+  defaultManageOpen?: boolean
+  /**
+   * The merchant's banner (Settings › Customer privacy): its words, position and colours. Absent =
+   * Nova's own banner. Where the banner shows is decided before it renders (consentBannerShows).
+   */
+  config?: ConsentBannerConfig | null
+}
+
+/**
+ * Nova 13 · 10 cookie consent (reference 03 · 3.11) — a non-modal banner
+ * under every overlay (--z-consent 250): what and why, Privacy policy,
+ * Manage, Reject non-essential and Accept all in one style (no dark
+ * patterns). A promotion popup waits until this is answered.
+ */
+export function CookieConsent({ open, privacyUrl, onDecide, preferencesAvailable, defaultManageOpen = false, config }: CookieConsentProps): JSX.Element | null {
+  const { strings } = useNova()
+  const [manage, setManage] = useState(defaultManageOpen)
+  const labelId = useId()
+  if (!open) return null
+  const all = { analytics: true, marketing: true, preferences: Boolean(preferencesAvailable) }
+  const t = config?.text ?? {}
+  return (
+    <>
+      <section
+        className="nv-consent"
+        role="region"
+        aria-labelledby={labelId}
+        data-position={config?.position}
+        data-scheme={config && config.colorTheme !== 'custom' ? config.colorTheme : undefined}
+      >
+        <p className="nv-consent__text" id={labelId}>
+          <strong>{t.title ?? strings.weUseCookies}</strong> {t.body ?? strings.cookiesNeeded}
+          {privacyUrl && (
+            <>
+              {' '}
+              <a href={privacyUrl}>{t.privacyLinkLabel ?? strings.privacyPolicy}</a>
+            </>
+          )}
+        </p>
+        <div className="nv-consent__actions">
+          <button type="button" className="nv-consent__manage" onClick={() => setManage(true)} aria-haspopup="dialog">
+            {t.manageLabel ?? strings.manage}
+          </button>
+          <Button variant="secondary" onClick={() => onDecide({ analytics: false, marketing: false, preferences: false })}>
+            {t.declineLabel ?? strings.rejectNonEssential}
+          </Button>
+          <Button variant="secondary" onClick={() => onDecide(all)}>
+            {t.acceptLabel ?? strings.acceptAll}
+          </Button>
+        </div>
+      </section>
+      <CookiePreferences
+        open={manage}
+        onClose={() => setManage(false)}
+        preferencesAvailable={preferencesAvailable}
+        copy={config?.preferences}
+        onSave={(c) => {
+          setManage(false)
+          onDecide(c)
+        }}
+      />
+    </>
+  )
+}

package/templates/nova/src/components/overlays/Drawer.css

@@ -0,0 +1,38 @@
+.nv-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--duration-base); }
+.nv-overlay[data-open] { visibility: visible; pointer-events: auto; transition: none; }
+.nv-overlay__scrim { position: absolute; inset: 0; background: var(--color-overlay-scrim); opacity: 0; transition: opacity var(--duration-base) var(--ease-exit); }
+.nv-overlay[data-open] .nv-overlay__scrim { opacity: 1; transition: opacity var(--duration-drawer) var(--ease-standard); }
+
+.nv-drawer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: min(440px, 100%);
+  background: var(--color-bg-elevated);
+  color: var(--color-fg);
+  box-shadow: var(--overlay-shadow);
+  transition: transform var(--duration-base) var(--ease-exit);
+  outline: none;
+}
+.nv-drawer[data-width='480'] { width: min(480px, 100%); }
+.nv-drawer[data-side='end'] { inset-inline-end: 0; border-inline-start: var(--overlay-hairline); transform: translateX(100%); }
+.nv-drawer[data-side='start'] { inset-inline-start: 0; width: min(342px, calc(100% - 48px)); border-inline-end: var(--overlay-hairline); transform: translateX(-100%); }
+[dir='rtl'] .nv-drawer[data-side='end'] { transform: translateX(-100%); }
+[dir='rtl'] .nv-drawer[data-side='start'] { transform: translateX(100%); }
+.nv-overlay[data-open] .nv-drawer { transform: none; transition: transform var(--overlay-slide-in) var(--ease-standard); }
+
+.nv-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5); border-bottom: var(--overlay-hairline); }
+.nv-drawer__heading { display: grid; min-width: 0; }
+.nv-drawer__heading h2:focus { outline: none; }
+.nv-drawer__subtitle { font-size: var(--type-caption); color: var(--color-fg-muted); }
+.nv-drawer__close { width: 44px; height: 44px; }
+.nv-drawer__title { font-size: 1.125rem; line-height: 1.35; font-weight: var(--weight-medium); letter-spacing: 0; }
+.nv-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-3) var(--space-5); }
+.nv-drawer__foot { padding: var(--space-4) var(--space-5) calc(var(--space-4) + env(safe-area-inset-bottom)); border-top: var(--overlay-hairline); background: var(--color-bg-elevated); }
+
+@media (prefers-reduced-motion: reduce) {
+  .nv-drawer, .nv-overlay[data-open] .nv-drawer { transform: none !important; opacity: 0; transition: opacity var(--duration-fast) linear; }
+  .nv-overlay[data-open] .nv-drawer { opacity: 1; }
+}

package/templates/nova/src/components/overlays/Drawer.tsx

@@ -0,0 +1,66 @@
+import { useRef, type ReactNode } from 'react'
+import { IconButton } from '../base/IconButton'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { TEXT_FIELD, inertWhen, useDialog } from './use-dialog'
+import './Drawer.css'
+
+/**
+ * Nova 13 · 00 Drawer — end 440 (commerce and utilities open from the
+ * inline-end) · start 342 (navigation only, where it follows a start-side
+ * trigger). Square (radius 0 on the edge), full height; at 390 the end
+ * drawer is full screen. Head / scroll body / sticky foot anatomy shared by
+ * CartDrawer, filters, MobileNavDrawer and Size guide. Slide 240ms; fade only
+ * under reduced motion. Mirrors in RTL (start is the reading-start edge).
+ */
+export interface DrawerProps {
+  open: boolean
+  onClose: () => void
+  side?: 'start' | 'end'
+  /** Accessible name. Also the visible title unless `head` is supplied. */
+  title: string
+  /** The title is merchant text (a page's own title): isolated in <bdi> so it keeps its own direction. Theme strings leave it off. */
+  isolateTitle?: boolean
+  /** Replaces the default title row (MobileNavDrawer's back + title). */
+  head?: ReactNode
+  hideTitle?: boolean
+  footer?: ReactNode
+  children: ReactNode
+  className?: string
+  /** Size guide is 480 wide (Nova 13.7). */
+  width?: 440 | 480
+  /** A second line under the title ("3 items"). */
+  subtitle?: ReactNode
+  /** Nova 13: auto = the first text field, else the title; title = always the title (cart); close = Close (mobile nav). */
+  initialFocus?: 'auto' | 'title' | 'close'
+}
+
+export function Drawer({ open, onClose, side = 'end', title, head, hideTitle, footer, children, className, width, subtitle, initialFocus = 'auto', isolateTitle }: DrawerProps): JSX.Element {
+  const panel = useRef<HTMLDivElement>(null)
+  const { strings } = useNova()
+  useDialog(open, onClose, panel, () =>
+    initialFocus === 'close'
+      ? undefined
+      : ((initialFocus === 'auto' ? panel.current?.querySelector<HTMLElement>(`.nv-drawer__body ${TEXT_FIELD}`) : null) ?? panel.current?.querySelector<HTMLElement>('[data-dialog-title]')),
+  )
+  return (
+    <div className="nv-overlay" data-open={open ? '' : undefined} {...inertWhen(!open)} aria-hidden={open ? undefined : true}>
+      <div className="nv-overlay__scrim" onClick={onClose} aria-hidden />
+      <div ref={panel} className={['nv-drawer', className].filter(Boolean).join(' ')} data-side={side} data-width={width} role="dialog" aria-modal="true" aria-label={title} tabIndex={-1}>
+        {head ?? (
+          <div className="nv-drawer__head">
+            <div className="nv-drawer__heading">
+              <h2 className={hideTitle ? 'nv-visually-hidden' : 'nv-drawer__title'} tabIndex={-1} data-dialog-title="">
+                {isolateTitle ? <bdi>{title}</bdi> : title}
+              </h2>
+              {subtitle && <p className="nv-drawer__subtitle">{subtitle}</p>}
+            </div>
+            <IconButton icon="close" label={fmt(strings.closeNamed, { name: title })} onClick={onClose} className="nv-drawer__close" />
+          </div>
+        )}
+        <div className="nv-drawer__body">{children}</div>
+        {footer && <div className="nv-drawer__foot">{footer}</div>}
+      </div>
+    </div>
+  )
+}

package/templates/nova/src/components/overlays/FriendOfferPanel.tsx

@@ -0,0 +1,79 @@
+import { useId, useState, type FormEvent, type KeyboardEvent } from 'react'
+import { useReferrals } from '@tanqory/theme-kit'
+import { Button } from '../base/Button'
+import { IconButton } from '../base/IconButton'
+import { Input } from '../base/Input'
+import { FormField } from '../forms/FormField'
+import { formatMoney } from '../commerce/money'
+import { useNova } from '../../styles/NovaProvider'
+import { fmt } from '../../styles/strings'
+import { offerAmount } from './ReferralPanel'
+
+const DISMISSED_KEY = 'nova:ref-dismissed'
+
+/**
+ * The friend offer (army #7751): a `?ref=CODE` visitor claims what their friend sent with their email; checkout
+ * applies the code. A non-modal card (never blocks the page or takes focus); Close and Escape put it away for the
+ * session. Nothing for a returning customer, with referrals off, on the server, or once claimed or closed.
+ */
+export function FriendOfferPanel(): JSX.Element | null {
+  const { friend, claim } = useReferrals()
+  const { strings, locale } = useNova()
+  const titleId = useId()
+  const [dismissed, setDismissed] = useState(() => sessionFlag())
+  const [email, setEmail] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [claimed, setClaimed] = useState(false)
+  const [error, setError] = useState<'email' | 'self' | 'failed' | null>(null)
+  if (!friend || dismissed || (friend.claimedCode && !claimed)) return null
+
+  const close = () => {
+    sessionFlag(true)
+    setDismissed(true)
+  }
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') close()
+  }
+  const onSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setBusy(true)
+    setError(null)
+    const out = await claim(email)
+    setBusy(false)
+    if (out.ok) setClaimed(true)
+    else setError(out.error)
+  }
+  const offer = offerAmount(friend.offer, locale)
+  const minimum = friend.minimumOrder && Number(friend.minimumOrder) > 0 && friend.offer.currency
+    ? fmt(strings.referralOfferMinimum, { amount: formatMoney({ amount: Number(friend.minimumOrder), currencyCode: friend.offer.currency }, locale) })
+    : ''
+  return (
+    <section className="nv-friend-offer" role="region" aria-labelledby={titleId} onKeyDown={onKeyDown}>
+      <IconButton icon="close" label={fmt(strings.closeNamed, { name: strings.referralOfferTitle })} onClick={close} className="nv-friend-offer__close" />
+      <h2 id={titleId}>{strings.referralOfferTitle}</h2>
+      <p>
+        {friend.advocateFirstName ? fmt(strings.referralOfferFrom, { name: friend.advocateFirstName, offer }) : fmt(strings.referralOfferAnon, { offer })}
+        {minimum && <span className="nv-rewards__meta">{minimum}</span>}
+      </p>
+      {!claimed && (
+        <form onSubmit={(e) => void onSubmit(e)} noValidate>
+          <FormField label={strings.email} required error={error === 'email' ? strings.referralClaimFailed : undefined}>
+            <Input type="email" autoComplete="email" value={email} onChange={(e) => setEmail(e.currentTarget.value)} />
+          </FormField>
+          <Button type="submit" block loading={busy}>{strings.referralClaim}</Button>
+        </form>
+      )}
+      <p className="nv-rewards__status" role="status">{claimed ? strings.referralClaimed : ''}</p>
+      {error && error !== 'email' && <p className="nv-rewards__error" role="alert">{error === 'self' ? strings.referralClaimSelf : strings.referralClaimFailed}</p>}
+    </section>
+  )
+}
+
+function sessionFlag(set?: true): boolean {
+  try {
+    if (set) sessionStorage.setItem(DISMISSED_KEY, '1')
+    return sessionStorage.getItem(DISMISSED_KEY) === '1'
+  } catch {
+    return Boolean(set)
+  }
+}

package/templates/nova/src/components/overlays/MarketSelector.css

@@ -0,0 +1,111 @@
+/* MarketSelector — 12A chrome control spec: popover radius 12 · sheets 16 top ·
+   44px rows · focus ring never removed. Tokens only. */
+.nv-market { position: relative; display: inline-flex; }
+.nv-market[data-block] { display: flex; width: 100%; }
+
+.nv-market__popover {
+  position: absolute;
+  z-index: var(--z-popover);
+  width: min(344px, calc(100vw - 2 * var(--page-gutter)));
+  padding: var(--space-5);
+  border-radius: 12px;
+  background: var(--color-bg-elevated);
+  color: var(--color-fg);
+  box-shadow: var(--shadow-popover);
+  text-align: start;
+  outline: none;
+}
+[data-scheme='dark'] .nv-market__popover { box-shadow: var(--shadow-popover), inset 0 0 0 1px var(--color-border); }
+.nv-market__popover[data-placement^='top'] { bottom: calc(100% + var(--space-2)); }
+.nv-market__popover[data-placement^='bottom'] { top: calc(100% + var(--space-2)); }
+.nv-market__popover[data-placement$='end'] { inset-inline-end: 0; }
+.nv-market__popover[data-placement$='start'] { inset-inline-start: 0; }
+
+.nv-market__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) var(--space-3) 0; }
+.nv-market__head[data-step='language'] { margin-inline-start: calc(-1 * var(--space-2)); }
+.nv-market__head[data-step='language'] .nv-market__title { flex: 1; text-align: center; }
+.nv-market__title { font-family: var(--font-display); font-size: 1.0625rem; font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: 0; }
+.nv-market__body { display: grid; gap: var(--space-4); }
+.nv-market__group { display: grid; gap: var(--space-2); }
+.nv-market__label { font-size: var(--type-body-sm); font-weight: var(--weight-medium); }
+.nv-market__note { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+
+.nv-market__field {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  min-height: var(--touch-target);
+  padding-inline: var(--space-3) 10px;
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--input-radius);
+  background: var(--color-bg);
+  color: var(--color-fg);
+  text-align: start;
+}
+.nv-market__field:hover { border-color: var(--color-border-input); }
+.nv-market__field-value { flex: 1; font-size: var(--type-body); }
+.nv-market__field-meta { font-size: var(--type-body-sm); color: var(--color-fg-muted); }
+.nv-market__field > .nv-icon { color: var(--color-fg-muted); }
+
+/* 2 languages — segmented */
+.nv-market__segmented { display: flex; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-md); background: var(--color-bg-muted); }
+.nv-market__segment { flex: 1; min-height: 40px; border-radius: var(--radius-sm); font-size: var(--type-body); color: var(--color-fg-muted); }
+.nv-market__segment[aria-checked='true'] { background: var(--color-bg-elevated); color: var(--color-fg); font-weight: var(--weight-medium); box-shadow: var(--shadow-floating); }
+.nv-market__segment[aria-disabled='true'] { color: var(--color-fg-subtle); text-decoration: line-through; cursor: not-allowed; }
+
+/* 3–4 languages — radio rows (44px) */
+.nv-market__radios { display: grid; border: 1px solid var(--color-border-control); border-radius: var(--input-radius); overflow: hidden; }
+.nv-market__radio { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); padding-inline: var(--space-3); cursor: pointer; }
+.nv-market__radio + .nv-market__radio { border-top: var(--border-subtle); }
+.nv-market__radio:has(input:checked) { background: var(--color-bg-muted); }
+.nv-market__radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+.nv-market__radio-dot { flex: none; width: 20px; height: 20px; border: var(--border-width-control) solid var(--color-border-input); border-radius: var(--radius-circle); }
+.nv-market__radio input:checked + .nv-market__radio-dot { border: 6px solid var(--color-fg); }
+.nv-market__radio input:focus-visible + .nv-market__radio-dot { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
+.nv-market__radio .nv-market__option-meta { margin-inline-start: auto; }
+.nv-market__radio[data-disabled] { color: var(--color-fg-subtle); cursor: not-allowed; }
+.nv-market__radio[data-disabled] > span[lang] { text-decoration: line-through; }
+
+/* Searchable list — countries, 5+ languages */
+.nv-market__picker { display: grid; gap: var(--space-2); }
+.nv-market__list { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1); border: 1px solid var(--color-border-control); border-radius: var(--input-radius); }
+.nv-market__list:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
+.nv-market__option { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-target); padding-inline: var(--space-3) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
+.nv-market__option[data-active] { background: var(--color-bg-muted); }
+.nv-market__option[aria-selected='true'] { font-weight: var(--weight-medium); }
+.nv-market__option[aria-disabled='true'] { color: var(--color-fg-subtle); cursor: not-allowed; }
+.nv-market__option[aria-disabled='true'] .nv-market__option-label { text-decoration: line-through; }
+.nv-market__option-label { flex: 1; min-width: 0; }
+.nv-market__option-meta { font-size: var(--type-body-sm); font-weight: var(--weight-body); color: var(--color-fg-muted); }
+.nv-market__option-check { display: inline-grid; width: 16px; flex: none; }
+.nv-market__empty { padding: var(--space-3); color: var(--color-fg-muted); font-size: var(--type-body-sm); }
+
+.nv-market__error { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border-radius: var(--radius-md); background: var(--color-danger-surface); color: var(--color-danger); font-size: var(--type-body-sm); }
+
+/* < 640 — bottom sheet (above a drawer: modal layer) */
+.nv-market__layer { position: fixed; inset: 0; z-index: var(--z-modal); }
+.nv-market__scrim { position: absolute; inset: 0; background: var(--color-overlay-scrim); animation: nv-market-fade var(--duration-base) var(--ease-standard); }
+.nv-market__sheet {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  max-height: 90vh;
+  overflow-y: auto;
+  padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
+  border-radius: 16px 16px 0 0;
+  background: var(--color-bg-elevated);
+  color: var(--color-fg);
+  text-align: start;
+  outline: none;
+  animation: nv-market-up var(--duration-drawer) var(--ease-standard);
+}
+.nv-market__grabber { display: block; width: 36px; height: 4px; margin: 0 auto var(--space-3); border-radius: var(--radius-pill); background: var(--color-border); }
+.nv-market__sheet .nv-market__head { margin-top: 0; }
+.nv-market__sheet .nv-market__list { max-height: 44vh; border: 0; padding: 0; border-radius: 0; }
+.nv-market__sheet .nv-market__option { min-height: 50px; padding-inline: 0; border-radius: 0; border-bottom: var(--border-subtle); }
+.nv-market__sheet .nv-market__option[data-active] { background: transparent; }
+.nv-market__sheet .nv-market__option-meta { margin-inline-end: var(--space-2); }
+.nv-market__sheet .nv-btn { min-height: 48px; }
+@keyframes nv-market-up { from { transform: translateY(24px); opacity: 0; } }
+@keyframes nv-market-fade { from { opacity: 0; } }