lynx-family · Sherry-hue · Feb 9, 2026 · Feb 6, 2026 · Feb 6, 2026 · Feb 6, 2026
diff --git a/.changeset/little-beans-judge.md b/.changeset/little-beans-judge.md
@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+Inherit padding styles for x-input elements.
diff --git a/.github/lynx-stack.instructions.md b/.github/lynx-stack.instructions.md
@@ -5,3 +5,4 @@ applyTo: "packages/web-platform/web-elements/**/*"
 When updating web element APIs, add targeted Playwright tests in packages/web-platform/web-elements/tests/web-elements.spec.ts and keep changes minimal.
 Ensure Playwright browsers are installed (pnpm exec playwright install --with-deps <browser>) before running web-elements tests.
 For x-input type="number" in web-elements, keep inner input type as text, set inputmode="decimal", and filter number input internally without setting input-filter explicitly.
+Add new web-elements UI fixtures under packages/web-platform/web-elements/tests/fixtures and commit matching snapshots in packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots.
@@ -28,6 +28,7 @@ x-input::part(input), x-input::part(form) {
   background-color: inherit;
   z-index: inherit;
   margin: inherit;
+  padding: inherit;
   color: inherit;
 }
 

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- Copyright 2024 The Lynx Authors. All rights reserved.
+ Licensed under the Apache License Version 2.0 that can be found in the
+ LICENSE file in the root directory of this source tree. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>web playground</title>
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="default" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="portrait" name="screen-orientation">
+    <meta
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      name="viewport"
+    >
+    <meta content="portrait" name="x5-orientation" />
+
+    <link
+      href="/main.css"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <script src="/main.js" defer></script>
+    <x-view class="page">
+      <x-view
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
+      >
+        <x-input
+          style="height: 40px; z-index: -1"
+          confirm-type="done"
+          value="hello"
+        ></x-input>
+      </x-view>
+      <x-view
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
+      >
+        <x-input
+          style="height: 40px; padding: 0 12px; z-index: -1"
+          confirm-type="done"
+          value="hello"
+        ></x-input>
+      </x-view>
+    </x-view>
+  </body>
+</html>
@@ -18,7 +18,7 @@
    ReturnType<typeof expect<Page>>['toHaveScreenshot']
  >[0],
 ) => {
  await expect(page).toHaveScreenshot([`${caseName}`, `${subcaseName}.png`], {
    maxDiffPixelRatio: 0,
    fullPage: true,
    animations: 'allow',
@@ -2953,6 +2953,14 @@
         await diffScreenShot(page, title, 'initial');
       },
     );
+    test(
+      'style-inherit-padding',
+      async ({ page }, { titlePath }) => {
+        const title = getTitle(titlePath);
+        await gotoWebComponentPage(page, title);
+        await diffScreenShot(page, title, 'initial');
+      },
+    );
     test(
       'style-inherit-color',
       async ({ page }, { titlePath }) => {