@vibeuncle/gpgb-ui 0.2.1 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 Versions follow semver while 0.x: **minor** = new components or token changes that may shift appearance, **patch** = fixes. Apps pin with `^0.x.0`.
 
+## 0.4.0
+- **Standard sizes:** header row is a fixed 72px (`ds-header-row`, built into `SiteHeader`) so the logo and page sit at the same height in every app; exact control heights, sm 32 / md 40 / lg 48px for buttons and inputs (`ds-input-lg` added), tabs 40px; page head classes `ds-page-head`, `ds-title` (36/48px), `ds-title-sm`, `ds-lede`; `ds-search` and `<SearchInput>`; `<PageTitle small>`. `ds-page-title` removed (use `ds-page-head`).
+- The browser test suite now measures these sizes in the style guide.
+- Appearance: buttons that were 46px (lg) are now 48px; inputs 39px are 40px; small inputs 34px are 32px; headers that depended on their content are now 72px.
+
+## 0.3.0
+- **Page width standard:** the 72rem (1152px) frame of draw.gpgb.app, now with responsive gutters (16px, 24px from 640px) so desktop content is 1104px. `ds-container-wide` (80rem), `ds-measure` (42rem reading column inside the frame), `ds-split` / `<SplitLayout>` (content + 22rem side panel), `ds-grid-cards` (auto-fill card grid). `<PageShell wide>`.
+- Docs: Tailwind's `rounded-sm/md/lg/xl` and `shadow-sm/md/lg` follow the system scale (they are defined in `@theme`), and the page-width rules.
+
 ## 0.2.1
 - Release pipeline only: publishes through npm trusted publishing (no token). No code or appearance changes.
 

package/DESIGN.md

@@ -187,7 +187,11 @@ Rule: no raw hex in app code; no Tailwind red/gray/orange.
 
 ## Layout
 
-- 4px base. Page gutter 24px; `ds-container` max 72rem. Card padding 16 to 24px; field gap 16px; button icon gap 8px.
+- **Standard sizes (every app):** header 72px (+1px border) with the 24px (`h-6`) graphic logo; page title 36px (48px from 640px), 40/48px below the header; buttons and inputs 32 / 40 / 48px (page action = lg; toolbar and search = md; row actions = sm); segmented tabs and the language toggle 40px. Fixed heights, not by-products of padding.
+
+- **Page frame:** 72rem (1152px) centered, as draw.gpgb.app; gutters 16px, then 24px from 640px (1104px of content on desktop). The header and the content share it. Editors and big tables use the 80rem wide frame. Never a narrower frame: narrow content is a 42rem column (`ds-measure`) inside it; sign-in, invite and not-found are a 400px centered card.
+- **Using the width:** content plus a 22rem side panel (`ds-split`, from 1024px, sticky; stacks on smaller screens), responsive card grids (`ds-grid-cards`, columns of at least 18rem), or a 240px left navigation column for editors and admin.
+- 4px spacing base. Card padding 16 to 24px; field gap 16px; button icon gap 8px.
 - Mobile-first; `sm` (640px) is the phone/tablet switch. On touch (`pointer: coarse`) inputs are 16px (no iOS zoom) and buttons are 44px tall; switches get a 44px hit area; tabs 40px.
 - Sections separate with generous vertical space (40px) and a hairline; groups inside stay tight.
 

package/DESIGN_SYSTEM.md

@@ -89,7 +89,7 @@ Rules: one flourish per view; everything else is quiet feedback that answers an
 ## Navigation
 | Piece | React | Notes |
 |---|---|---|
-| Header | `<SiteHeader logoSrc title nav actions menuButton containerClassName homeLabel>` | Graphic logo left; `nav` shows from `md`; `menuButton` shows below `md`. Includes a skip link to `#main` (give your `<main>` that id). `containerClassName` sets the content width (default 72rem `ds-container`; narrow apps pass e.g. `mx-auto max-w-2xl px-5`). Put short always-visible links in `actions` instead of `nav`. |
+| Header | `<SiteHeader logoSrc title nav actions menuButton containerClassName homeLabel>` | Graphic logo left; `nav` shows from `md`; `menuButton` shows below `md`. Includes a skip link to `#main` (give your `<main>` that id). `containerClassName` sets the content width (default the 72rem `ds-container` frame; pass `ds-container ds-container-wide` on wide pages; don't narrow it). Put short always-visible links in `actions` instead of `nav`. |
 | Nav links | `<NavLinks items>` / `ds-nav-link` | Pill links; current = accent-soft wash + `aria-current="page"`. |
 | Phone nav | `<MenuButton>` + `<NavDrawer items open onOpenChange>` | Left drawer (`Sheet side="left"`). Closes on link click, Esc, scrim. |
 | Account | `<UserMenu>` / `<SignInButton>` | Avatar + menu: settings, extras, sign out. Signed out: outline 登录 button. |
@@ -105,8 +105,33 @@ Pick by job: **Menu** = list of actions; **Popover** = a little extra content or
 - Modal, ConfirmDialog and Sheet trap focus, close on Esc, lock scroll and restore focus to the opener. Footer order: outline cancel, then the primary or danger action, whose label names the action ("删除海报", not "确定").
 - Positioning is simple (below the trigger, start or end aligned); there is no collision flipping yet. Keep triggers away from the bottom edge, or use a Sheet on phones.
 
+## Standard sizes (identical in every app)
+| Thing | Size | Class |
+|---|---|---|
+| Header | **72px** tall (+1px border), content centred, whatever is inside (language toggle, buttons, nothing); inner content at most 48px | `ds-header-row` (built into `SiteHeader`) |
+| Logo | **24px** high (`h-6`), always the graphic mark | |
+| Page title | **36px**, 48px from 640px, serif 500, tracking -0.025em. Detail pages with long titles: 30px / 36px | `ds-title`, `ds-title-sm` |
+| Page head | title + lede on the left, actions right; **40px** below the header (48px from 640px) | `ds-page-head`, `ds-lede`, `<PageTitle>` |
+| Buttons | **sm 32 / md 40 / lg 48px**; icon buttons are square at the same size | `ds-btn` `-sm` `-lg` `-icon` |
+| Inputs | **sm 32 / md 40 / lg 48px** | `ds-input` `-sm` `-lg` |
+| Search | the 40px input with a leading icon | `ds-search` / `<SearchInput>` |
+| Segmented tabs / language toggle | **40px** | `ds-tabs` |
+| Touch (`pointer: coarse`) | controls 44px, input text 16px | automatic |
+
+Use: page-level action (new poster, new album, create group) = **lg**; toolbar and in-card actions, search and filter tabs = **md** (they line up in one 40px row); compact row actions = **sm**. Don't set your own heights or text sizes on these. The style guide's "Sizes & page head" section measures them live, and `npm test` asserts them.
+
+## Page width
+One width across all 大道大商 apps: the **72rem frame** (1152px, centered), as on draw.gpgb.app. Gutters are 16px, then 24px from 640px, so desktop content is **1104px** wide. The header and the page content share the frame.
+- **Standard:** `ds-container` (72rem). Galleries, dashboards, chat, lists, forms-with-context.
+- **Wide:** `ds-container ds-container-wide` (80rem). Editors and big tables only. Pass the same to `SiteHeader`'s `containerClassName`.
+- **Never narrow the frame.** Narrow content is a column *inside* it: `ds-measure` (42rem) for reading text or a single form. Sign-in, invite and not-found pages are a `CenteredPage` card (400px).
+- **Use the width:** `ds-split` / `<SplitLayout aside>` puts content on the left and a 22rem side panel (share link, QR, info, actions) on the right from 1024px, stacking below on smaller screens; `ds-grid-cards` is a responsive card grid (columns of at least 18rem); `<SidebarLayout>` is a left navigation column (240px) for editors, settings and admin.
+- **Phones:** everything is one column with 16px gutters; the frame only matters from tablet up.
+
+Tailwind note: `rounded-sm/md/lg/xl` (6/8/12/16px) and `shadow-sm/md/lg` are the system scale (they are defined in `@theme`), so they differ slightly from Tailwind's defaults in every app that imports the package. Use them rather than arbitrary radii.
+
 ## Page layouts
-`<PageShell header footer>` (header, 72rem container, footer: lists, galleries, dashboards) · `<CenteredPage>` (one 400px card: sign-in, invite, not-found) · `<SidebarLayout aside>` (240px sticky aside from `lg`; on phones move the aside into a bottom Sheet: editors, settings, admin) · `<PageTitle title description actions breadcrumbs>` (serif title, primary action first on phones).
+`<PageShell header footer wide>` (header, frame, footer: lists, galleries, dashboards) · `<CenteredPage>` (one 400px card: sign-in, invite, not-found) · `<SplitLayout aside>` (content + right side panel) · `<SidebarLayout aside>` (left navigation column: editors, settings, admin; on phones move it into a bottom Sheet) · `<PageTitle title description actions breadcrumbs>` (serif title, primary action first on phones).
 
 ## Content & voice
 Warm, plain, respectful: a helpful neighbour at the community centre. Chinese (简体) first, English beside or beneath. Say what happened and what to do next; never blame the person.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibeuncle/gpgb-ui",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "大道大商 shared design system: tokens, CSS components, React components, style guide",
   "license": "UNLICENSED",
   "repository": {

package/src/components/Layout.tsx

@@ -6,12 +6,12 @@ import { t } from '../copy'
 import type { Lang } from '../copy'
 import { useLink } from '../link'
 
-/** Standard page: header, main, footer. Content width via `ds-container`. */
-export function PageShell({ header, children, footer }: { header?: ReactNode; children: ReactNode; footer?: ReactNode }) {
+/** Standard page: header, main, footer, all on the 72rem frame (`wide` = 80rem for editors and big tables). */
+export function PageShell({ header, children, footer, wide }: { header?: ReactNode; children: ReactNode; footer?: ReactNode; wide?: boolean }) {
   return (
     <div className="ds-page">
       {header}
-      <main id="main" className="ds-container py-10">{children}</main>
+      <main id="main" className={cn('ds-container py-10', wide && 'ds-container-wide')}>{children}</main>
       {footer}
     </div>
   )
@@ -22,22 +22,26 @@ export function CenteredPage({ children }: { children: ReactNode }) {
   return <div className="ds-page-centered"><main id="main" className="ds-card">{children}</main></div>
 }
 
-/** Page title row: serif title + description on the left, actions on the right (primary action first on phones). */
-export function PageTitle({ title, description, actions, breadcrumbs }: { title: string; description?: string; actions?: ReactNode; breadcrumbs?: ReactNode }) {
+/** The page head, identical in position and type on every page: serif title (36px, 48px from 640px; `small` = 30/36px for detail pages
+ *  with long titles), optional lede, actions on the right. Sits 40/48px below the header. */
+export function PageTitle({ title, description, actions, breadcrumbs, small }: { title: string; description?: string; actions?: ReactNode; breadcrumbs?: ReactNode; small?: boolean }) {
   return (
-    <div className="mb-9">
-      {breadcrumbs && <div className="mb-3">{breadcrumbs}</div>}
-      <div className="ds-page-title !mb-0">
-        <div className="min-w-0">
-          <h1 className="font-display text-4xl font-medium sm:text-5xl">{title}</h1>
-          {description && <p className="mt-3 max-w-[44em] text-[13px] leading-[1.85] text-ink-soft">{description}</p>}
-        </div>
-        {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
+    <div className="ds-page-head">
+      <div className="min-w-0">
+        {breadcrumbs && <div className="mb-3">{breadcrumbs}</div>}
+        <h1 className={small ? 'ds-title-sm' : 'ds-title'}>{title}</h1>
+        {description && <p className="ds-lede">{description}</p>}
       </div>
+      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
     </div>
   )
 }
 
+/** Content + side panel (share link, QR, info, actions). Panel is on the right from 1024px (sticky) and stacks below the content on smaller screens. */
+export function SplitLayout({ aside, children }: { aside: ReactNode; children: ReactNode }) {
+  return <div className="ds-split"><div className="min-w-0">{children}</div><aside>{aside}</aside></div>
+}
+
 /** Sidebar + content (editor, settings, admin). Sidebar is sticky from `lg`; on phones put its content in a Sheet instead. */
 export function SidebarLayout({ aside, children, wide }: { aside: ReactNode; children: ReactNode; wide?: boolean }) {
   return <div className={cn('ds-shell', wide && 'ds-shell-wide')}><aside>{aside}</aside><div className="min-w-0">{children}</div></div>

package/src/components/SearchInput.tsx

@@ -0,0 +1,13 @@
+import { Search } from 'lucide-react'
+import type { InputHTMLAttributes } from 'react'
+import { cn } from '../cn'
+
+/** Search field: the standard 40px `ds-input` with a leading icon. Pass `label` (the accessible name) and a placeholder. */
+export function SearchInput({ label, className, wrapperClassName, ...rest }: InputHTMLAttributes<HTMLInputElement> & { label: string; wrapperClassName?: string }) {
+  return (
+    <div className={cn('ds-search', wrapperClassName)}>
+      <Search aria-hidden />
+      <input type="search" aria-label={label} className={cn('ds-input', className)} {...rest} />
+    </div>
+  )
+}

package/src/components/SiteHeader.tsx

@@ -7,7 +7,7 @@ import { useLink } from '../link'
  *  Phones: pass `menuButton` (see MenuButton + NavDrawer) and hide `nav` below `md` (NavLinks className="hidden md:flex"). */
 export function SiteHeader({ logoSrc, logoAlt = '大道大商', title, nav, actions, menuButton, href = '/', containerClassName = 'ds-container', homeLabel }: {
   logoSrc: string; logoAlt?: string; title?: string; nav?: ReactNode; actions?: ReactNode; menuButton?: ReactNode; href?: string
-  /** Width/gutter of the header content. Default `ds-container` (72rem). Narrow apps pass e.g. 'mx-auto max-w-2xl px-5' to line up with their page column. */
+  /** Width/gutter of the header content. Default `ds-container` (the 72rem frame). Keep it equal to the page's frame: pass 'ds-container ds-container-wide' on wide pages. Don't narrow it; put narrow content in a column inside the frame. */
   containerClassName?: string
   /** aria-label for the logo link when there is no title (e.g. "接龙 首页"). */
   homeLabel?: string
@@ -16,7 +16,7 @@ export function SiteHeader({ logoSrc, logoAlt = '大道大商', title, nav, acti
   return (
     <header className="ds-header">
       <a href="#main" className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50 ds-btn ds-btn-primary">Skip to content</a>
-      <div className={`${containerClassName} flex items-center justify-between gap-x-4 gap-y-2 py-4`}>
+      <div className={`${containerClassName} ds-header-row flex items-center justify-between gap-x-4 gap-y-2`}>
         <div className="flex min-w-0 items-center gap-3">
           {menuButton && <div className="md:hidden">{menuButton}</div>}
           <Link href={href} aria-label={homeLabel} className="flex min-w-0 items-center gap-4">

package/src/index.ts

@@ -17,3 +17,4 @@ export * from './copy'
 export * from './hooks'
 export * from './components/Stamp'
 export * from './link'
+export * from './components/SearchInput'

package/styles/components.css

@@ -36,9 +36,12 @@
   .ds-hint { font-size: 12px; color: var(--color-ink-faint); }
 
   /* ---- Buttons: pills. One primary per view. ---- */
+  /* Control heights are a standard, not a by-product of padding: sm 32px, md 40px, lg 48px (buttons, inputs, tabs). Page-level
+     action = lg; toolbar and in-card actions = md; compact row actions = sm. */
   .ds-btn {
+    --ds-h: 40px; min-height: var(--ds-h);
     display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-    padding: 10px 20px; font-size: 14px; font-weight: 500; line-height: 1.3;
+    padding: 0 20px; font-size: 14px; font-weight: 500; line-height: 1.3;
     border: 1px solid transparent; border-radius: var(--radius-pill); cursor: pointer;
     transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out,
       border-color var(--duration-fast) ease-out, box-shadow var(--duration-fast) ease-out,
@@ -46,9 +49,9 @@
   }
   .ds-btn:active:not(:disabled) { transform: scale(0.97); }
   .ds-btn:disabled, .ds-btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
-  .ds-btn-sm { padding: 6px 14px; font-size: 13px; }
-  .ds-btn-lg { padding: 12px 24px; font-size: 15px; }
-  .ds-btn-icon { padding: 8px; aspect-ratio: 1; }
+  .ds-btn-sm { --ds-h: 32px; padding: 0 14px; font-size: 13px; }
+  .ds-btn-lg { --ds-h: 48px; padding: 0 24px; font-size: 15px; }
+  .ds-btn-icon { padding: 0; width: var(--ds-h); }
   .ds-btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-sm); }
   .ds-btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
   .ds-btn-outline { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-soft); }
@@ -70,7 +73,7 @@
   /* ---- Forms ---- */
   .ds-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--color-ink); }
   .ds-input {
-    width: 100%; padding: 10px 14px; font-size: 14px; color: var(--color-ink);
+    width: 100%; min-height: 40px; padding: 9px 14px; font-size: 14px; line-height: 1.4; color: var(--color-ink);
     background: var(--color-surface); border: 1px solid var(--color-border-strong);
     border-radius: var(--radius-md); transition: border-color var(--duration-fast) ease-out;
   }
@@ -80,7 +83,9 @@
   .ds-input:disabled { opacity: 0.55; cursor: not-allowed; }
   .ds-input[aria-invalid='true'] { border-color: var(--color-danger); }
   .ds-input[aria-invalid='true']:focus-visible { outline-color: var(--color-danger); border-color: var(--color-danger); }
-  .ds-input-sm { padding: 7px 12px; font-size: 13px; }
+  .ds-input-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; }
+  .ds-input-lg { min-height: 48px; padding: 12px 16px; font-size: 15px; }
+  textarea.ds-input, select.ds-input-sm, textarea.ds-input-sm { min-height: 0; }
   textarea.ds-input { resize: vertical; min-height: 88px; line-height: 1.6; }
   .ds-error { margin-top: 6px; font-size: 12px; color: var(--color-danger); }
   /* Checkbox / radio: native control, brand-coloured, with a comfortable hit target. */
@@ -126,11 +131,11 @@
 
   /* ---- Segmented control / tabs (role=tablist) ---- */
   .ds-tabs {
-    display: flex; gap: 6px; padding: 4px; width: fit-content; background: var(--color-surface);
+    display: flex; gap: 4px; padding: 3px; width: fit-content; background: var(--color-surface);   /* 3 + 32 + 3 + 2 border = 40px */
     border: 1px solid var(--color-border-soft); border-radius: var(--radius-md);
   }
   .ds-tab {
-    padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); cursor: pointer;
+    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; font-size: 12px; font-weight: 500; color: var(--color-ink-soft); cursor: pointer;
     border: 0; background: transparent; border-radius: var(--radius-sm);
     transition: background-color var(--duration-fast) ease-out, color var(--duration-fast) ease-out;
   }
@@ -282,13 +287,42 @@
   @media (min-width: 1024px) { .ds-shell { grid-template-columns: 240px minmax(0, 1fr); } .ds-shell-wide { grid-template-columns: 280px minmax(0, 1fr); } }
   .ds-shell > aside { align-self: start; }
   @media (min-width: 1024px) { .ds-shell > aside { position: sticky; top: 24px; } }
-  .ds-page-title { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
+  /* Page head: the same position and type on every page. Title 36px (48px from 640px), 40px (48px) above it, optional lede and
+     actions on the right. Detail pages with long titles use ds-title-sm (30px / 36px). */
+  .ds-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding-top: 40px; padding-bottom: 24px; }
+  @media (min-width: 640px) { .ds-page-head { padding-top: 48px; padding-bottom: 32px; } }
+  .ds-title { font-family: var(--font-display); font-weight: 500; font-size: 36px; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
+  .ds-title-sm { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
+  @media (min-width: 640px) { .ds-title { font-size: 48px; } .ds-title-sm { font-size: 36px; } }
+  .ds-lede { margin-top: 12px; max-width: 48rem; font-size: 14px; line-height: 1.7; color: var(--color-ink-soft); }
+  @media (min-width: 640px) { .ds-lede { font-size: 15px; } }
+  /* Search field: a ds-input with a leading icon. <div class="ds-search"><svg/><input class="ds-input" type="search"></div> */
+  .ds-search { position: relative; display: block; width: 100%; }
+  .ds-search > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--color-ink-faint); pointer-events: none; }
+  .ds-search > .ds-input { padding-left: 38px; }
+  .ds-search > .ds-input::-webkit-search-cancel-button { display: none; }
 
   /* ---- Header / layout ---- */
   .ds-header { border-bottom: 1px solid var(--color-border-soft); }
+  /* Every header is the same height whatever sits in it (language toggle, buttons, nothing): 72px + 1px border, content centred.
+     The logo is always h-6 (24px). Content must not be taller than 48px. */
+  .ds-header-row { min-height: 72px; padding-block: 12px; }
   /* Hairline between the 大道大商 mark and the app name, so the graphic logo and the app title don't read as one phrase. */
   .ds-brand-divider { width: 1px; height: 20px; flex-shrink: 0; background: var(--color-border-strong); opacity: 0.55; }
-  .ds-container { margin-inline: auto; width: 100%; max-width: 72rem; padding-inline: 24px; }
+  /* Page width: the 72rem frame (1152px, = draw.gpgb.app), gutters 16px then 24px from 640px, so 1104px of content on desktop.
+     Header and page content share it. Never use a narrower frame: put narrow content in a column INSIDE it (ds-measure). */
+  .ds-container { margin-inline: auto; width: 100%; max-width: 72rem; padding-inline: 16px; }
+  @media (min-width: 640px) { .ds-container { padding-inline: 24px; } }
+  .ds-container-wide { max-width: 80rem; }   /* editors, big tables: add to ds-container */
+  .ds-measure { max-width: 42rem; }          /* reading text / single-column form inside the frame */
+  /* Content + side panel. From 1024px the panel sits to the right (22rem, sticky); below that it stacks under the content. */
+  .ds-split { display: grid; gap: 24px; }
+  @media (min-width: 1024px) {
+    .ds-split { grid-template-columns: minmax(0, 1fr) 22rem; gap: 32px; }
+    .ds-split > aside { position: sticky; top: 24px; align-self: start; }
+  }
+  /* Responsive card grid: as many columns as fit at >=18rem. */
+  .ds-grid-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
   /* Underline draws in from the left on hover. */
   .ds-link {
     color: var(--color-ink-soft); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
@@ -337,9 +371,9 @@
 
   /* Touch: >=16px inputs (iOS zoom) and 44px tap targets; fine pointers keep compact sizes. */
   @media (pointer: coarse) {
-    .ds-input, .ds-input-sm { font-size: 16px; padding-top: 11px; padding-bottom: 11px; }
-    .ds-btn { min-height: 44px; }
-    .ds-tab { min-height: 40px; }
+    .ds-input, .ds-input-sm { font-size: 16px; min-height: 44px; }
+    .ds-btn { min-height: max(44px, var(--ds-h)); }
+    .ds-tab { min-height: 36px; }
     .ds-menu-item { min-height: 44px; }
     .ds-nav-link { min-height: 40px; }
   }