@highpixel-co/palda-design-system 0.5.0 → 0.8.0

package/dist/scripts/check-examples.mjs

@@ -31,7 +31,7 @@
  * (`docs/DESIGN_GRAMMAR.md` §자리는 시스템이 정하지 않는다).
  */
 import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
-import { dirname, join, relative, resolve } from 'node:path';
+import { basename, dirname, join, relative, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const DEFAULT_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), '..');
@@ -41,7 +41,13 @@ const ROW = /^\|([^|]*)\|([^|]*)\|/;
 /** 표의 구분선(`| --- | --- |`)은 항목이 아니다. */
 const DIVIDER = /^[\s:-]*$/;
 
-const PRIMARY_ACTION_PLACES = new Set(['헤더 우측', 'BottomBar']);
+/**
+ * 주 액션의 자리. `없음`은 고르는 행위가 본문 안에서 끝나는 화면이다 — 목록을 훑고 행을 눌러
+ * 들어가는 화면은 행이 곧 액션이라 헤더나 하단에 세울 것이 없다
+ * (`docs/decisions/0033-a-screen-may-have-no-primary-action.md`). 행 자체는 여전히 필수라
+ * "적기를 잊은 것"과 "정말 없는 것"이 갈린다.
+ */
+const PRIMARY_ACTION_PLACES = new Set(['헤더 우측', 'BottomBar', '없음']);
 
 /** 시안을 찾는 곳. `preview/`는 untracked라 CI에서는 비어 있고 로컬에서만 걸린다. */
 const SCREEN_DIRS = ['preview', 'examples'];
@@ -79,41 +85,6 @@ const EMPHASIS_CLASSES = [
   'palda-chip--accent',
 ];
 
-/**
- * 곁이 세로로 한 줄인지(0022 규칙 1)를 정적으로 근사한다. 블록 요소가 하나라도 들어 있으면
- * 줄이 나뉜다 — 곁에 남는 표현은 텍스트와 `Link`라(0022 §대가) 인라인만으로 충분하다.
- * 줄바꿈 자체는 폭에 달려 있어 여전히 못 읽는다. 이 검사가 잡는 것은 마크업으로 이미 갈라 둔
- * 경우다.
- */
-const BLOCK_ELEMENTS = new Set([
-  'address',
-  'article',
-  'aside',
-  'blockquote',
-  'div',
-  'dl',
-  'fieldset',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hr',
-  'li',
-  'main',
-  'nav',
-  'ol',
-  'p',
-  'section',
-  'table',
-  'ul',
-]);
-
 /**
  * 상태를 드는 자리 (0024 — 상태는 가장 가까운 자리가 든다).
  * 한 섹션이 둘을 같이 쓰면 행 하나의 실패를 섹션이 대신 말한 것이다. `\b`가 `_`를 경계로 보지
@@ -123,6 +94,46 @@ const FORM_SECTION_CLASS = 'palda-form-section';
 const SECTION_FAILURE_CLASS = 'palda-form-section__error';
 const ROW_FAILURE_CLASS = 'palda-badge--danger';
 
+/**
+ * 본문을 여러 묶음으로 가르는 축 (`decisions/0023`·`0037`). 선언서가 밝히고 마크업이 따라온다.
+ *
+ * 같은 종류가 여러 갈래로 나뉘면 `탭`이고, 서로 다른 종류가 나열되면 `섹션`이다. 판정은 사람이
+ * 하지만 **고른 결과와 마크업이 어긋나는 것**은 셀 수 있다 — 갈래를 제목 여러 개로 세워 놓고
+ * 탭이라 적거나, 탭을 그려 놓고 섹션이라 적는 경우다.
+ */
+const GROUPING_LABEL = '갈래';
+const GROUPING_VALUES = ['탭', '섹션', '탭+섹션', '없음'];
+const TABLIST = /role\s*=\s*"tablist"/;
+/** 섹션 하나를 여는 자리. `--plain`·`--filled`가 붙어도 한 번만 센다. */
+const SECTION_OPEN = /class="palda-form-section[\s"]/g;
+
+/**
+ * 섹션의 채움 (`decisions/0037`). 면은 갈라야 할 형제가 있을 때만 켜고, 면 위에 다른 면을
+ * 얹지 않는다. 요약 행(`ListRow tone="filled"`)은 컴포넌트가 스스로 한 단계 올리므로 여기서
+ * 세지 않는다 — 세는 것은 **면이 스스로 못 피하는 겹침**뿐이다.
+ */
+const SECTION_FILLED_CLASS = 'palda-form-section--filled';
+const NESTED_SURFACE_CLASS = 'palda-card';
+
+/**
+ * 면을 켜야 하는데 안 켠 자리 (`decisions/0037`).
+ *
+ * 0037은 "제목과 여백만으로 안 갈릴 때"를 조건으로 두고, §적용에서 그 갈림을 못 센다고 남겨
+ * 뒀다. 몇 px 차이부터 안 갈리는지 수치가 없어서다. **다만 차이가 0인 경우는 셀 수 있다** —
+ * 섹션 제목과 그 안 행 제목이 같은 텍스트 스타일 클래스를 그대로 쓰고 있으면, 갈릴 여지가
+ * 애초에 없다.
+ *
+ * 0034를 적용해 본문 목록을 한 칸 올린 화면(`emphasis="strong"` → 제목 `body1`)이 전부 이
+ * 상태가 된다. 섹션 제목도 `body1`이라 두 글자가 문자열까지 같아진다. 2026-09-06 연동 도우미
+ * 시안이 그렇게 나왔고, 0037이 예로 든 내 계정 화면(16 대 14)보다 심한 판이라 승격했다.
+ *
+ * 2px 차이는 여전히 못 센다. 그것은 리뷰가 본다.
+ */
+const TYPOGRAPHY_CLASS = /\bpalda-text-[a-z0-9-]+\b/;
+const SECTION_HEADING_CLASS = /palda-form-section__header[\s\S]*?<h2[^>]*\bclass="([^"]*)"/;
+const SECTION_FIELDS_CLASS = 'palda-form-section__fields';
+const SECTION_FOOTER_CLASS = 'palda-form-section__footer';
+
 /** 닫는 태그가 없는 요소. 깊이를 올리지 않는다. */
 const VOID_ELEMENTS = new Set([
   'area',
@@ -173,18 +184,36 @@ function checkDeclaration(rows, where, problems) {
     problems.push(`${where}: 주 액션이 ${primary.length}개다 — 자리는 하나다`);
   } else if (!PRIMARY_ACTION_PLACES.has(primary[0].value)) {
     problems.push(
-      `${where}: 주 액션 자리가 \`${primary[0].value}\`다 — ${[...PRIMARY_ACTION_PLACES]
+      `${where}: 주 액션 자리가 \`${primary[0].value}\`이다 — ${[...PRIMARY_ACTION_PLACES]
         .map((place) => `\`${place}\``)
         .join(' 또는 ')} 중 하나여야 한다`,
     );
   }
 
+  /** 본문을 무엇으로 가르는지. 적는 행위가 탭이냐 섹션이냐의 판단을 남긴다 (0023). */
+  const grouping = rows.filter((row) => row.label === GROUPING_LABEL);
+  if (grouping.length === 0) {
+    problems.push(
+      `${where}: 선언서에 \`${GROUPING_LABEL}\` 행이 없다 — ${GROUPING_VALUES.map((value) => `\`${value}\``).join('·')} 중 하나를 밝힌다`,
+    );
+  } else if (grouping.length > 1) {
+    problems.push(`${where}: ${GROUPING_LABEL}가 ${grouping.length}개다 — 축은 하나다`);
+  } else if (!GROUPING_VALUES.includes(grouping[0].value)) {
+    problems.push(
+      `${where}: ${GROUPING_LABEL}가 \`${grouping[0].value}\`이다 — ${GROUPING_VALUES.map((value) => `\`${value}\``).join('·')} 중 하나여야 한다`,
+    );
+  }
+
   /** `곁` 행에 `없음`이라고 적으면 곁이 0개라는 뜻이다. */
   const asides = rows
     .filter((row) => row.label === '곁')
     .filter((row) => row.value !== '' && row.value !== '없음');
 
-  return { declared: body.length > 0, asides: asides.length };
+  return {
+    declared: body.length > 0,
+    asides: asides.length,
+    grouping: grouping.length === 1 ? grouping[0].value : null,
+  };
 }
 
 /** 주석을 같은 길이의 공백으로 지운다. 주석 안의 예시 마크업이 태그로 세지지 않게 한다. */
@@ -299,7 +328,7 @@ function checkBlocks(blocks, declaredAsides, where, problems) {
     }
     if (!ROLES.includes(role)) {
       problems.push(
-        `${where}: 바디 ${index + 1}번째 블록의 data-screen-role이 \`${role}\`다 — ${ROLES.map((name) => `\`${name}\``).join('·')} 중 하나여야 한다`,
+        `${where}: 바디 ${index + 1}번째 블록의 data-screen-role이 \`${role}\`이다 — ${ROLES.map((name) => `\`${name}\``).join('·')} 중 하나여야 한다`,
       );
       roles.push(null);
       continue;
@@ -325,16 +354,6 @@ function checkBlocks(blocks, declaredAsides, where, problems) {
         );
       }
     }
-
-    // 규칙 1 — 세로로 한 줄이다. 블록 요소가 들어 있으면 이미 여러 줄이다.
-    const inner = scanTags(block.html)
-      .slice(1)
-      .filter((tag) => !tag.closing && BLOCK_ELEMENTS.has(tag.name));
-    if (inner.length > 0) {
-      problems.push(
-        `${where}: 곁 안에 블록 요소(<${inner[0].name}>)가 있다 — 곁은 세로로 한 줄이다 (0022 규칙 1)`,
-      );
-    }
   }
 
   // 상태는 가장 가까운 자리가 든다 (0024). 소속과 무관하게 바디 전체를 본다.
@@ -368,7 +387,8 @@ function checkBlocks(blocks, declaredAsides, where, problems) {
     );
   }
 
-  // 선언되지 않은 곁은 화면에 들어오지 못한다.
+  // 선언되지 않은 곁은 화면에 들어오지 못한다. 곁이 몇 개여야 하는지는 세지 않는다 — 기능이
+  // 다르면 블록도 다르고(0032 규칙 1), 개수는 기능 수가 정한다.
   const drawn = roles.filter((role) => role === '곁').length;
   if (drawn !== declaredAsides) {
     problems.push(
@@ -386,7 +406,169 @@ function htmlFiles(dir, out = []) {
   return out;
 }
 
-export function validateScreenHtml(source, where, requireScreen = false) {
+/**
+ * 화면의 섹션 이름. `FormSection`의 헤더에 있는 `h2`가 그것이다 — 화면이 무엇으로 나뉘는지를
+ * 사람이 읽는 자리와 같다. 주석 안의 예시 마크업은 세지 않으므로 주석을 먼저 지운다.
+ */
+const SECTION_HEADING = /palda-form-section__header[\s\S]*?<h2[^>]*>([^<]*)<\/h2>/g;
+
+/** 뒤에 붙는 개수 표기는 값이라 이름이 아니다 — `상품 템플릿 3/10`과 `상품 템플릿`은 같다. */
+const stripCount = (name) => name.replace(/\s*\d+\s*\/\s*\d+\s*$/, '').trim();
+
+function screenSections(source) {
+  return [...stripComments(source).matchAll(SECTION_HEADING)]
+    .map((match) => stripCount(match[1]))
+    .filter(Boolean);
+}
+
+/**
+ * 선언 주석에 등록한 자매와의 차이. `1. [섹션]` 또는 `1. [이쪽] ↔ [저쪽]` 형태다.
+ * 적는 행위가 판단을 남긴다 — 왜 갈라졌는지가 그 자리에 남아 다음에 다시 판단하지 않는다.
+ */
+const REGISTERED_DIFF = /^\s*\d+\.\s*\[([^\]]+)\](?:\s*↔\s*\[([^\]]+)\])?/gm;
+
+function registeredDiffs(source) {
+  return new Set(
+    [...source.matchAll(REGISTERED_DIFF)].flatMap((match) =>
+      [match[1], match[2]].filter(Boolean).map(stripCount),
+    ),
+  );
+}
+
+const siblingOf = (rows) => rows.find((row) => row.label === '자매')?.value || null;
+
+/**
+ * 자매로 선언한 두 화면의 섹션 집합을 비교한다 (`decisions/0036`).
+ * 차이를 금지하지 않고 **적지 않은 차이**를 막는다. 문자열 집합 비교라 판단이 들어가지 않는다.
+ */
+function checkSiblings(source, where, rows, siblings, problems) {
+  const name = siblingOf(rows);
+  if (!name) return;
+
+  const mate = siblings.get(name);
+  if (mate === undefined) {
+    problems.push(`${where}: 자매로 적은 \`${name}\`을 찾을 수 없다 — 같은 시안 디렉터리에 둔다`);
+    return;
+  }
+
+  // 짝이 맞는지는 상대의 `자매` 행이 나를 가리키는지다. 한쪽만 적으면 반대편이 모른다.
+  const self = basename(where, '.html');
+  const back = siblingOf(declarationRows(mate));
+  if (back !== self) {
+    problems.push(
+      `${where}: 자매 선언이 짝이 안 맞는다 — \`${name}\`의 자매는 \`${back ?? '없음'}\`이다. 양쪽 다 적는다`,
+    );
+    return;
+  }
+
+  const theirs = new Set(screenSections(mate));
+  const registered = registeredDiffs(source);
+  for (const section of screenSections(source)) {
+    if (theirs.has(section) || registered.has(section)) continue;
+    problems.push(
+      `${where}: 섹션 [${section}]이 자매(${name})에 없는데 선언에 등록되지 않았다 — 차이는 \`1. [${section}]\` 형태로 적는다`,
+    );
+  }
+}
+
+/**
+ * 선언한 갈래와 마크업이 맞는지 (0023). 탭 줄은 `role="tablist"`로, 섹션 나열은 형제
+ * `FormSection` 둘 이상으로 읽는다. 섹션 하나는 나누는 축이 아니라 그냥 본문이다.
+ */
+function checkGrouping(blocks, declared, where, problems) {
+  if (!declared) return;
+
+  const html = blocks.map((block) => block.html).join('\n');
+  const drawnTabs = TABLIST.test(html);
+  const drawnSections = (html.match(SECTION_OPEN) ?? []).length >= 2;
+  const expectTabs = declared.includes('탭');
+  const expectSections = declared.includes('섹션');
+
+  if (expectTabs && !drawnTabs) {
+    problems.push(
+      `${where}: ${GROUPING_LABEL}를 \`${declared}\`로 적었는데 본문에 \`role="tablist"\`가 없다 — 탭 줄은 쓰는 쪽이 만든다 (0023)`,
+    );
+  }
+  if (!expectTabs && drawnTabs) {
+    problems.push(
+      `${where}: 본문이 탭으로 갈리는데 ${GROUPING_LABEL}가 \`${declared}\`이다 — 같은 종류의 갈래를 탭이 가른다면 그렇게 적는다`,
+    );
+  }
+  if (expectSections && !drawnSections) {
+    problems.push(
+      `${where}: ${GROUPING_LABEL}를 \`${declared}\`로 적었는데 형제 섹션이 둘 미만이다 — 섹션 하나는 나누는 축이 아니다`,
+    );
+  }
+  if (!expectSections && drawnSections) {
+    problems.push(
+      `${where}: 본문이 섹션 여럿으로 나뉘는데 ${GROUPING_LABEL}가 \`${declared}\`이다 — 같은 종류의 갈래라면 제목을 여러 개 세우는 대신 탭으로 가른다 (0023)`,
+    );
+  }
+}
+
+/**
+ * 섹션의 내용 자리. `__fields`부터 `__footer` 앞까지다 — 면이 붙는 자리가 거기 하나이고,
+ * 제목·오류·footer는 면 밖에 남는다 (0037).
+ */
+function sectionFields(section) {
+  const start = section.indexOf(SECTION_FIELDS_CLASS);
+  if (start === -1) return '';
+  const footer = section.indexOf(SECTION_FOOTER_CLASS, start);
+  return section.slice(start, footer === -1 ? undefined : footer);
+}
+
+/** 섹션의 채움이 제 조건에서 켜졌는지 (0037). */
+function checkSectionFill(blocks, where, problems) {
+  const html = blocks.map((block) => block.html).join('\n');
+  const sections = formSections(html);
+  const filled = sections.filter((section) =>
+    new RegExp(`\\b${SECTION_FILLED_CLASS}\\b`).test(section.slice(0, section.indexOf('>') + 1)),
+  );
+
+  // 켜야 하는데 안 켠 자리. 형제가 있고, 제목과 내용의 텍스트 스타일이 문자열까지 같으면
+  // 여백 말고 갈릴 것이 없다. 형제가 하나뿐이면 애초에 켜지 못하므로(아래) 세지 않는다.
+  if (sections.length >= 2) {
+    for (const section of sections) {
+      const head = section.slice(0, section.indexOf('>') + 1);
+      if (new RegExp(`\\b${SECTION_FILLED_CLASS}\\b`).test(head)) continue;
+
+      const heading = SECTION_HEADING_CLASS.exec(section)?.[1] ?? '';
+      const style = TYPOGRAPHY_CLASS.exec(heading)?.[0];
+      if (!style) continue;
+
+      const fields = sectionFields(section);
+      // 내용이 이미 덩어리면 면이 할 일이 없다. 카드 그리드가 그 자리다 (0037) — 아래에서
+      // 면을 켜지 못하게 막는 것과 같은 표시를 쓴다. 결제의 `요금제`·`구매 수량`이 그렇다.
+      if (new RegExp(`\\b${NESTED_SURFACE_CLASS}\\b`).test(fields)) continue;
+
+      if (new RegExp(`\\b${style}\\b`).test(fields)) {
+        problems.push(
+          `${where}: 섹션 제목과 그 내용이 같은 \`${style}\`인데 면이 없다 — 제목과 여백만으로 갈리지 않는다 (0037)`,
+        );
+      }
+    }
+  }
+
+  if (filled.length === 0) return;
+
+  // 면은 형제를 가르는 장치다. 혼자면 가를 것이 없고 곁만 본문에 흡수된다.
+  if (sections.length < 2) {
+    problems.push(
+      `${where}: 섹션이 하나인데 \`${SECTION_FILLED_CLASS}\`이다 — 면은 갈라야 할 형제가 있을 때 켠다 (0037)`,
+    );
+  }
+
+  // 내용이 이미 덩어리면 면이 한 겹 겹친다. 카드 그리드가 그 자리다.
+  for (const section of filled) {
+    if (new RegExp(`\\b${NESTED_SURFACE_CLASS}\\b`).test(section)) {
+      problems.push(
+        `${where}: \`${SECTION_FILLED_CLASS}\` 안에 \`${NESTED_SURFACE_CLASS}\`가 있다 — 내용이 이미 덩어리면 면을 주지 않는다 (0037)`,
+      );
+    }
+  }
+}
+
+export function validateScreenHtml(source, where, requireScreen = false, siblings = null) {
   const problems = [];
   const blocks = bodyBlocks(source);
   if (blocks === null) {
@@ -398,11 +580,25 @@ export function validateScreenHtml(source, where, requireScreen = false) {
     problems.push(`${where}: 화면 선언 표가 없다 — 파일 맨 위 주석에 둔다`);
     return problems;
   }
-  const { asides } = checkDeclaration(rows, where, problems);
+  const { asides, grouping } = checkDeclaration(rows, where, problems);
   checkBlocks(blocks, asides, where, problems);
+  checkGrouping(blocks, grouping, where, problems);
+  checkSectionFill(blocks, where, problems);
+  // 자매는 짝이 있어야 셀 수 있다. 파일 하나만 주면 이 검사는 건너뛴다.
+  if (siblings) checkSiblings(source, where, rows, siblings, problems);
   return problems;
 }
 
+/**
+ * 자매를 찾는 색인. 키는 확장자를 뺀 파일 이름이고, 선언서가 그 이름으로 상대를 가리킨다.
+ * 이름이 겹치면 먼저 읽은 쪽이 남는다 — 시안 이름은 화면 하나를 가리키므로 겹치지 않는다.
+ */
+export function siblingIndex(entries) {
+  const index = new Map();
+  for (const { name, source } of entries) if (!index.has(name)) index.set(name, source);
+  return index;
+}
+
 export function validateExamples(root = DEFAULT_ROOT) {
   const problems = [];
 
@@ -416,18 +612,27 @@ export function validateExamples(root = DEFAULT_ROOT) {
     }
   }
 
-  // 2. 시안 HTML — 선언서 + 바디 블록의 소속.
+  // 2. 시안 HTML — 선언서 + 바디 블록의 소속 + 자매의 섹션 집합.
+  //    자매는 짝이 필요해서 전부 읽어 색인을 만든 뒤에 검사한다.
+  const screens = [];
   for (const dir of SCREEN_DIRS) {
     const full = join(root, dir);
     if (!existsSync(full)) continue;
 
     for (const file of htmlFiles(full)) {
-      const source = readFileSync(file, 'utf8');
-      const where = relative(root, file);
-      problems.push(...validateScreenHtml(source, where));
+      screens.push({
+        name: basename(file, '.html'),
+        source: readFileSync(file, 'utf8'),
+        where: relative(root, file),
+      });
     }
   }
 
+  const siblings = siblingIndex(screens);
+  for (const screen of screens) {
+    problems.push(...validateScreenHtml(screen.source, screen.where, false, siblings));
+  }
+
   return problems;
 }
 

package/dist/styles.css

@@ -1091,8 +1091,6 @@
 
 /* src/NavigationButton/NavigationButton.css */
 .palda-navigation-button {
-  --palda-navigation-button-icon-color: var(--palda-color-border-strong);
-  --palda-navigation-button-text-color: var(--palda-color-text-disabled);
   align-items: center;
   background: var(--palda-navigation-button-background, transparent);
   border: 0;
@@ -1100,34 +1098,55 @@
   box-sizing: border-box;
   color: var(--palda-navigation-button-text-color);
   cursor: pointer;
-  display: flex;
   gap: var(--palda-space-gap-sm);
-  height: 48px;
   justify-content: flex-start;
-  padding: var(--palda-space-3) var(--palda-space-4);
+  min-width: 0;
   text-align: left;
+  text-decoration: none;
   transition: background-color var(--palda-duration-fast) var(--palda-easing-standard), color var(--palda-duration-fast) var(--palda-easing-standard);
+}
+.palda-navigation-button--md {
+  --palda-navigation-button-icon-color: var(--palda-color-border-strong);
+  --palda-navigation-button-text-color: var(--palda-color-text-disabled);
+  display: flex;
+  height: 48px;
+  padding: var(--palda-space-3) var(--palda-space-4);
   width: 100%;
 }
+.palda-navigation-button--sm {
+  --palda-navigation-button-icon-color: var(--palda-color-primary-default);
+  --palda-navigation-button-text-color: var(--palda-color-text-primary);
+  display: inline-flex;
+  height: 36px;
+  padding: var(--palda-space-2) var(--palda-space-3);
+}
 .palda-navigation-button__icon {
   align-items: center;
   color: var(--palda-navigation-button-icon-color);
   display: inline-flex;
   flex-shrink: 0;
+  justify-content: center;
+}
+.palda-navigation-button--md .palda-navigation-button__icon {
   font-size: 24px;
   height: 24px;
-  justify-content: center;
   width: 24px;
 }
+.palda-navigation-button--sm .palda-navigation-button__icon {
+  font-size: 20px;
+  height: 20px;
+  width: 20px;
+}
 .palda-navigation-button__label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.palda-navigation-button:not(:disabled, .palda-navigation-button--selected):is(:hover, :active) {
+.palda-navigation-button--md:not(:disabled, .palda-navigation-button--selected):is(:hover, :active),
+.palda-navigation-button--sm:not(:disabled):is(:hover, :active) {
   --palda-navigation-button-background: var(--palda-color-state-hover-pressed);
 }
-.palda-navigation-button--selected {
+.palda-navigation-button--md.palda-navigation-button--selected {
   --palda-navigation-button-background: var(--palda-color-accent-subtle);
   --palda-navigation-button-icon-color: var(--palda-color-accent-default);
   --palda-navigation-button-text-color: var(--palda-color-text-accent);
@@ -1245,6 +1264,49 @@
   }
 }
 
+/* src/Skeleton/Skeleton.css */
+.palda-skeleton {
+  animation: palda-skeleton-pulse var(--palda-duration-normal) var(--palda-easing-standard) infinite alternate;
+  background: var(--palda-color-surface-sunken);
+  border-radius: var(--palda-radius-control-sm);
+  display: block;
+}
+.palda-skeleton--body1 {
+  height: var(--palda-font-size-md);
+}
+.palda-skeleton--body2 {
+  height: var(--palda-font-size-sm);
+}
+.palda-skeleton--label {
+  height: var(--palda-font-size-xs);
+}
+.palda-skeleton--full {
+  width: 100%;
+}
+.palda-skeleton--wide {
+  width: 70%;
+}
+.palda-skeleton--narrow {
+  width: 40%;
+}
+.palda-skeleton--block {
+  block-size: 100%;
+  inline-size: 100%;
+}
+@keyframes palda-skeleton-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.4;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .palda-skeleton {
+    animation: none;
+  }
+}
+
 /* src/Switch/Switch.css */
 .palda-switch {
   align-items: center;
@@ -1355,6 +1417,11 @@
   justify-content: center;
   width: 24px;
 }
+.palda-tab__badge {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+}
 .palda-tab__label {
   white-space: nowrap;
 }
@@ -1503,6 +1570,24 @@
   }
 }
 
+/* src/Thumbnail/Thumbnail.css */
+.palda-thumbnail {
+  background: var(--palda-color-surface-raised);
+  border-radius: var(--palda-radius-control);
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  object-fit: cover;
+}
+.palda-thumbnail--md {
+  height: 40px;
+  width: 40px;
+}
+.palda-thumbnail--sm {
+  height: 32px;
+  width: 32px;
+}
+
 /* src/Toast/Toast.css */
 .palda-toast {
   align-items: center;
@@ -1886,7 +1971,7 @@ button.palda-card {
   text-align: start;
   width: 100%;
 }
-button.palda-card:hover {
+button.palda-card:not(.palda-card--selected):hover {
   border-color: var(--palda-color-border-strong);
 }
 button.palda-card:focus-visible {
@@ -2005,6 +2090,16 @@ button.palda-card:focus-visible {
   gap: var(--palda-space-gap-lg);
   min-width: 0;
 }
+.palda-form-section--filled .palda-form-section__fields {
+  background: var(--palda-color-surface-raised);
+  border-radius: var(--palda-radius-container);
+  padding: var(--palda-space-inset-md);
+  --palda-list-row-filled-background: var(--palda-color-surface-base);
+}
+.palda-form-section--filled .palda-text-field--outline,
+.palda-form-section--filled .palda-text-field--accent {
+  --palda-text-field-background: var(--palda-color-surface-base);
+}
 .palda-form-section__footer {
   align-items: center;
   display: flex;
@@ -2033,7 +2128,7 @@ button.palda-card:focus-visible {
   border-block-end: 0;
 }
 .palda-list-row--filled {
-  background: var(--palda-color-surface-raised);
+  background: var(--palda-list-row-filled-background, var(--palda-color-surface-raised));
   border-radius: var(--palda-radius-control);
   padding-inline: var(--palda-space-inset-md);
 }
@@ -2098,36 +2193,11 @@ button.palda-list-row:focus-visible {
   flex-direction: column;
   gap: var(--palda-space-gap-xs);
 }
-.palda-list-row__skeleton {
-  animation: palda-list-row-pulse var(--palda-duration-normal) var(--palda-easing-standard) infinite alternate;
-  background: var(--palda-color-surface-sunken);
-  border-radius: var(--palda-radius-control-sm);
-  display: block;
-}
-.palda-list-row__skeleton--title {
-  height: var(--palda-font-size-sm);
-  width: 40%;
-}
-.palda-list-row__skeleton--description {
-  height: var(--palda-font-size-xs);
-  width: 70%;
-}
-@keyframes palda-list-row-pulse {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0.4;
-  }
-}
 @media (prefers-reduced-motion: reduce) {
   .palda-list-row,
   .palda-list-row__chevron {
     transition: none;
   }
-  .palda-list-row__skeleton {
-    animation: none;
-  }
 }
 
 /* src/LivePreview/LivePreview.css */